{"data":[{"id":"611f5e9a-b115-4f78-81ce-f1541a88deef","source":"forgejo-runtime","status":"pending","payload":{"failed":[],"states":{"forgejo-main/source":"success","forgejo-release/workflow":"pending","frontend-cloudflare/live":"pending","cc-execution/runtime-proof":"pending","supabase-edge-production/live":"pending"},"mainSha":"7ae623d1dcc28f31dec7ebecba8ccd778fd73088","missing":[],"pending":["forgejo-release/workflow","cc-execution/runtime-proof","supabase-edge-production/live","frontend-cloudflare/live"],"required":["forgejo-main/source","forgejo-release/workflow","cc-execution/runtime-proof","supabase-edge-production/live","frontend-cloudflare/live"],"sourceSha":"7ae623d1dcc28f31dec7ebecba8ccd778fd73088","releaseState":"pending","sourceInMain":true,"compareStatus":"protected_main_push_exact_source","releaseTargets":{"frontend":true,"migrations":false,"ccExecution":true,"supabaseEdge":true,"edgeFunctionSlugs":["ai-respond","operator-respond"]},"releaseTargetStates":{"frontend":"pending","ccExecution":"pending","supabaseEdge":"pending"},"requestContractHash":"2ff076160d30aef968861fc6d6ca99b53ee2d243e04c11d5d279d63cdde814e6","forgejoWorkflowProof":{"runId":13000,"source":"signed_push_receipt","status":"running","results":{},"conclusion":"running","targetStates":{"frontend":"pending","ccExecution":"pending","supabaseEdge":"pending"},"targetJobCount":6,"observedTargetStates":{"frontend":"pending","ccExecution":"pending","supabaseEdge":"pending"}},"releaseSourceVerified":true,"ccExecutionRuntimeProof":{"liveSha":"596d7511f78ce3da6dfad7205efd0ebac9bfc717","deploymentId":"forgejo-main-596d7511f78ce3da6dfad7205efd0ebac9bfc717","compareStatus":null,"identitySource":"local_build_metadata","runtimeVersion":"1.63.3-stale-main-auto-refresh","containsSourceSha":false},"releaseTargetRecoveryProof":null,"exactReleaseVerifiedAfterMainAdvanced":false},"tenant_id":"a3ffa31f-0c88-4fdd-b872-051db013ca3e","created_at":"2026-09-29T05:09:12.280787+00:00","proof_gate":"canonical_release_pending","source_sha":"7ae623d1dcc28f31dec7ebecba8ccd778fd73088","external_id":"forgejo-main-7ae623d1dcc2","receipt_type":"canonical_release_status","idempotency_key":"mission:6d3a2677-78dd-41d2-b082-d13d7cc5fa9f:forgejo-release-status:7ae623d1dcc28f31dec7ebecba8ccd778fd73088:pending:forgejo-main/source=success|forgejo-release/workflow=pending|cc-execution/runtime-proof=pending|supabase-edge-production/live=pending|frontend-cloudflare/live=pending","mission_step_id":"6a81d305-6e9f-4d2c-8d06-097f405f3178","command_center_event_id":"6d3a2677-78dd-41d2-b082-d13d7cc5fa9f"},{"id":"6b5508b4-b8d8-4aac-b96d-175875ba13eb","source":"cc-execution","status":"waiting","payload":{"body":{"ship":true,"files":[{"path":"src/components/godmode/LiveEditMode.tsx","content":"import { useEffect, useMemo, useRef, useState } from 'react';\nimport { useLocation } from 'react-router-dom';\nimport { Loader2, Send, Sparkles } from 'lucide-react';\nimport { useMultiTenant } from '@/contexts/MultiTenantContext';\nimport { supabase } from '@/integrations/supabase/client';\nimport {\n commitLiveEditHistory,\n createLiveEditHistory,\n isLiveEditOperation,\n isSafeLiveEditAttributeProperty,\n isSafeLiveEditKey,\n isSafeLiveEditStyleProperty,\n isSafeLiveEditUrl,\n LIVE_EDIT_ROOT_SELECTOR,\n LIVE_EDIT_TEXT_SELECTOR,\n liveEditOperationAppliesToCurrentDevice,\n liveEditPropertyTargetIndex,\n liveEditPropertyTargets,\n liveEditRouteFamily,\n liveEditStorageKey,\n liveEditTargetForPropertyKey,\n liveEditTextTargets,\n operationsEqual,\n registerAutoLiveEditRoots,\n redoLiveEditHistory,\n sanitizeLiveEditOperations,\n undoLiveEditHistory,\n upsertLiveEditOperation,\n type LiveEditAction,\n type LiveEditAttributeProperty,\n type LiveEditDevice,\n type LiveEditHistory,\n type LiveEditOperation,\n type LiveEditStyleProperty,\n} from '@/lib/liveEditModel';\n\ntype OverrideRow = { id: string; title?: string | null; operations?: unknown; metadata?: Record | null; updated_at?: string | null; published_at?: string | null };\ntype RevisionRow = { id: string; operations: unknown; created_by: string; created_at: string };\ntype TemplateRow = { id: string; tenant_id?: string | null; name: string; compatibility_tenant_type: string; route_pattern: string; operations: unknown; version: number; updated_at: string };\ntype StoredWorkingCopy = { operations: LiveEditOperation[]; savedAt: string; basePublishedAt: string };\ntype InlineSession = { target: HTMLElement; componentKey: string; propertyKey: string; before: string; keydown: (event: KeyboardEvent) => void; blur: () => void };\ntype SidekickTurn = { role: 'user' | 'assistant'; content: string };\ntype Panel = 'more' | 'review' | 'history' | 'templates' | 'exit' | 'reset-section' | 'reset-page' | null;\n\nconst ROOT = LIVE_EDIT_ROOT_SELECTOR;\nconst TEXT = LIVE_EDIT_TEXT_SELECTOR;\nconst keyOf = (node: HTMLElement) => String(node.dataset.liveEditKey || node.dataset.experienceComponentId || '').trim();\nconst cssName = (name: string) => name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);\n\nfunction roots() {\n registerAutoLiveEditRoots();\n return Array.from(document.querySelectorAll(ROOT)).filter((node) => isSafeLiveEditKey(keyOf(node)));\n}\nfunction rootForKey(key: string) { return roots().find((node) => keyOf(node) === key) || null; }\nfunction targetFor(operation: LiveEditOperation) { const root = rootForKey(operation.audit.componentKey); return root ? liveEditTargetForPropertyKey(root, operation.audit.propertyKey) : null; }\nfunction styleProp(operation: LiveEditOperation) { return operation.audit.propertyKey.match(/^style\\.\\d+\\.([A-Za-z0-9-]+)$/)?.[1] || ''; }\nfunction attrProp(operation: LiveEditOperation) { return operation.audit.propertyKey.match(/^attr\\.\\d+\\.([A-Za-z0-9-]+)$/)?.[1] || ''; }\nfunction setStyleValue(target: HTMLElement, property: string, value: string) { if (isSafeLiveEditStyleProperty(property)) target.style.setProperty(cssName(property), value); }\nfunction setAttrValue(target: HTMLElement, property: string, value: string) {\n if (!isSafeLiveEditAttributeProperty(property)) return;\n if ((property === 'href' || property === 'src') && !isSafeLiveEditUrl(value)) return;\n if (property === 'target' && !['', '_self', '_blank'].includes(value)) return;\n if (value) target.setAttribute(property, value); else target.removeAttribute(property);\n}\nfunction applyOrder(operation: LiveEditOperation, raw = operation.value) {\n const anchor = rootForKey(operation.audit.componentKey);\n if (!anchor?.parentElement || !raw) return;\n try {\n const order = JSON.parse(raw);\n if (!Array.isArray(order)) return;\n const parent = anchor.parentElement;\n const siblings = roots().filter((node) => node.parentElement === parent);\n order.forEach((key) => { const node = siblings.find((item) => keyOf(item) === key); if (node) parent.appendChild(node); });\n } catch {}\n}\nfunction restore(operation: LiveEditOperation) {\n if (!liveEditOperationAppliesToCurrentDevice(operation)) return;\n if (operation.action === 'order') { applyOrder(operation, operation.audit.beforeValue); return; }\n const target = targetFor(operation); if (!target) return;\n if (operation.action === 'text') target.textContent = operation.audit.beforeText ?? operation.audit.beforeValue ?? '';\n if (operation.action === 'visibility') { target.style.display = operation.audit.beforeValue ?? ''; delete target.dataset.liveEditHiddenPreview; }\n if (operation.action === 'style') setStyleValue(target, styleProp(operation), operation.audit.beforeValue ?? '');\n if (operation.action === 'attribute') setAttrValue(target, attrProp(operation), operation.audit.beforeValue ?? '');\n}\nfunction applyWorking(operation: LiveEditOperation) {\n if (!liveEditOperationAppliesToCurrentDevice(operation)) return;\n if (operation.action === 'order') { applyOrder(operation); return; }\n const target = targetFor(operation); if (!target) return;\n if (operation.action === 'text') { if (target.childElementCount === 0 || target.matches('button,a')) target.textContent = operation.value || ''; return; }\n if (operation.action === 'visibility') { target.style.display = operation.audit.beforeValue ?? ''; if (/hide|hidden|off|remove/i.test(operation.value || '')) target.dataset.liveEditHiddenPreview = 'true'; else delete target.dataset.liveEditHiddenPreview; return; }\n if (operation.action === 'style') { setStyleValue(target, styleProp(operation), operation.value || ''); return; }\n if (operation.action === 'attribute') setAttrValue(target, attrProp(operation), operation.value || '');\n}\nfunction applyPublished(operations: LiveEditOperation[]) {\n operations.forEach((operation) => {\n if (!liveEditOperationAppliesToCurrentDevice(operation)) return;\n if (operation.action !== 'visibility') { applyWorking(operation); return; }\n const target = targetFor(operation); if (!target) return; delete target.dataset.liveEditHiddenPreview;\n target.style.display = /hide|hidden|off|remove/i.test(operation.value || '') ? 'none' : (operation.audit.beforeValue ?? '');\n });\n}\nfunction transition(from: LiveEditOperation[], to: LiveEditOperation[]) {\n const next = new Set(to.map((operation) => operation.id));\n from.forEach((operation) => { if (!next.has(operation.id)) restore(operation); });\n to.forEach(applyWorking);\n}\nfunction readWorkingCopy(key: string): StoredWorkingCopy | null {\n try { const raw = localStorage.getItem(key); if (!raw) return null; const parsed = JSON.parse(raw) as StoredWorkingCopy; return { operations: sanitizeLiveEditOperations(parsed.operations), savedAt: String(parsed.savedAt || ''), basePublishedAt: String(parsed.basePublishedAt || '') }; } catch { return null; }\n}\nfunction componentName(key: string) { return (key.split('.').filter(Boolean).pop() || 'section').replace(/[-_]+/g, ' ').replace(/\\b\\w/g, (letter) => letter.toUpperCase()); }\nfunction displayName(target: HTMLElement | null) { if (!target) return 'Section'; if (target instanceof HTMLImageElement) return target.alt || 'Image'; return (String(target.textContent || '').replace(/\\s+/g, ' ').trim().slice(0, 80) || target.getAttribute('aria-label') || target.tagName.toLowerCase()); }\nfunction computed(target: HTMLElement | null, property: LiveEditStyleProperty) { return target ? getComputedStyle(target).getPropertyValue(cssName(property)).trim() : ''; }\nfunction sidekickRole(target: HTMLElement) {\n const tag = target.tagName.toLowerCase();\n if (/^h[1-6]$/.test(tag)) return 'heading';\n if (target instanceof HTMLImageElement) return 'image';\n if (target.matches('button,[role=\"button\"]')) return 'button';\n if (target instanceof HTMLAnchorElement) return 'link';\n if (target.matches('input,textarea,select')) return 'field';\n if (target.matches('nav,[role=\"navigation\"]')) return 'navigation';\n if (target.matches('article,[class*=\"card\" i],[data-card]')) return 'card';\n if (target.childElementCount >= 2) return 'container';\n return 'content';\n}\nfunction sidekickRect(target: HTMLElement) {\n const rect = target.getBoundingClientRect();\n return { x: Math.round(rect.x), y: Math.round(rect.y), width: Math.round(rect.width), height: Math.round(rect.height), visible: rect.width > 0 && rect.height > 0 && rect.bottom > 0 && rect.right > 0 && rect.top < window.innerHeight && rect.left < window.innerWidth };\n}\nfunction describe(operation: LiveEditOperation, removed: boolean) { const label = componentName(operation.audit.componentKey); const scope = operation.device && operation.device !== 'all' ? ` on ${operation.device}` : ''; if (removed) return `Restore ${label}${scope}`; if (operation.action === 'text') return `Update text in ${label}`; if (operation.action === 'visibility') return `${/hide|hidden/i.test(operation.value || '') ? 'Hide' : 'Show'} ${label}${scope}`; if (operation.action === 'style' || operation.action === 'attribute') return `Change ${operation.audit.propertyKey.split('.').at(-1)} on ${label}${scope}`; return `Reorder ${label}`; }\n\nconst inputClass = 'mt-1 w-full rounded-lg border border-slate-700 bg-slate-950 px-2 py-1.5 text-xs text-white';\nconst boxClass = 'rounded-xl border border-slate-800 bg-slate-900/45 p-3';\n\nexport function LiveEditMode() {\n const location = useLocation();\n const { activeTenant, isLoading, hasGodModeAnywhere, isTenantOwner } = useMultiTenant();\n const canEdit = !isLoading && !!activeTenant?.id && (hasGodModeAnywhere() || isTenantOwner());\n const [on, setOn] = useState(false);\n const [history, setHistory] = useState(() => createLiveEditHistory([]));\n const historyRef = useRef(history);\n const [published, setPublished] = useState([]);\n const [publishedAt, setPublishedAt] = useState('');\n const [userId, setUserId] = useState('');\n const [selected, setSelected] = useState(null);\n const [status, setStatus] = useState('');\n const [loading, setLoading] = useState(false);\n const [panel, setPanel] = useState(null);\n const [device, setDevice] = useState('all');\n const [revisions, setRevisions] = useState([]);\n const [templates, setTemplates] = useState([]);\n const [sidekickInput, setSidekickInput] = useState('');\n const [sidekickReply, setSidekickReply] = useState('');\n const [sidekickBusy, setSidekickBusy] = useState(false);\n const [sidekickTurns, setSidekickTurns] = useState([]);\n const inlineRef = useRef(null);\n const operations = history.present;\n const dirty = useMemo(() => !operationsEqual(operations, published), [operations, published]);\n const pending = useMemo(() => {\n const before = new Map(published.map((o) => [o.id, o])), after = new Map(operations.map((o) => [o.id, o]));\n return [...new Set([...before.keys(), ...after.keys()])].flatMap((id) => JSON.stringify(before.get(id) || null) === JSON.stringify(after.get(id) || null) ? [] : [{ id, operation: after.get(id) || before.get(id)!, removed: !after.get(id) }]);\n }, [operations, published]);\n const storageKey = useMemo(() => userId && activeTenant?.id ? liveEditStorageKey(userId, activeTenant.id, location.pathname) : '', [userId, activeTenant?.id, location.pathname]);\n const routeFamily = useMemo(() => liveEditRouteFamily(location.pathname), [location.pathname]);\n\n const replaceHistory = (next: LiveEditHistory) => { const current = historyRef.current; if (next === current) return; transition(current.present, next.present); historyRef.current = next; setHistory(next); };\n const commit = (next: LiveEditOperation[]) => replaceHistory(commitLiveEditHistory(historyRef.current, next));\n const undo = () => replaceHistory(undoLiveEditHistory(historyRef.current));\n const redo = () => replaceHistory(redoLiveEditHistory(historyRef.current));\n\n const finishInline = (mode: 'commit' | 'cancel') => {\n const session = inlineRef.current; if (!session) return; inlineRef.current = null;\n session.target.removeEventListener('keydown', session.keydown); session.target.removeEventListener('blur', session.blur); session.target.removeAttribute('contenteditable'); delete session.target.dataset.liveEditInline;\n const root = session.target.closest(ROOT); if (root) root.draggable = true;\n if (mode === 'cancel') { session.target.textContent = session.before; setStatus('Text edit cancelled.'); return; }\n const value = String(session.target.textContent || '').slice(0, 2000); if (value === session.before) return;\n const id = `${session.componentKey}:${session.propertyKey}:all`, current = historyRef.current.present, existing = current.find((o) => o.id === id);\n commit(upsertLiveEditOperation(current, { id, action: 'text', value, device: 'all', audit: { source: 'live-edit', route: location.pathname, componentKey: session.componentKey, propertyKey: session.propertyKey, beforeText: existing?.audit.beforeText ?? session.before, beforeValue: existing?.audit.beforeValue ?? session.before } }));\n setStatus('Text changed privately.');\n };\n const beginInline = (target: HTMLElement, root: HTMLElement) => {\n const allowed = liveEditTextTargets(root), index = allowed.indexOf(target); if (!target.matches(TEXT) || (target !== root && index < 0)) return;\n if (inlineRef.current) finishInline('commit'); const key = keyOf(root); if (!isSafeLiveEditKey(key)) return;\n const propertyKey = target === root ? 'self' : `text.${index}`, before = target.textContent || '';\n const keydown = (event: KeyboardEvent) => { if (event.key === 'Escape') { event.preventDefault(); finishInline('cancel'); target.blur(); } else if (event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); finishInline('commit'); target.blur(); } };\n const blur = () => finishInline('commit'); inlineRef.current = { target, componentKey: key, propertyKey, before, keydown, blur }; root.draggable = false; target.dataset.liveEditInline = 'true'; target.contentEditable = 'true'; target.addEventListener('keydown', keydown); target.addEventListener('blur', blur); target.focus();\n };\n\n useEffect(() => {\n const handler = (event: KeyboardEvent) => {\n const target = event.target as HTMLElement | null; if (target?.matches('input,textarea,select,[contenteditable=\"true\"]')) return;\n const command = event.ctrlKey || event.metaKey, key = event.key.toLowerCase();\n if (on && command && key === 'z') { event.preventDefault(); event.shiftKey ? redo() : undo(); return; }\n if (!command || !event.shiftKey || key !== 'e' || !canEdit) return;\n event.preventDefault();\n if (on) { if (dirty) { setPanel('exit'); return; } applyPublished(published); setOn(false); setPanel(null); }\n else { registerAutoLiveEditRoots(); setOn(true); }\n setSelected(null); setStatus('');\n };\n window.addEventListener('keydown', handler); return () => window.removeEventListener('keydown', handler);\n }, [canEdit, on, dirty, published]);\n\n useEffect(() => { if (!on) return; document.documentElement.dataset.liveEditMode = 'true'; return () => { delete document.documentElement.dataset.liveEditMode; }; }, [on]);\n\n useEffect(() => {\n if (!on || !activeTenant?.id) return; let cancelled = false; setLoading(true); setSelected(null); setPanel(null);\n (async () => {\n const auth = await supabase.auth.getUser(), actor = auth.data.user; if (!actor || cancelled) { setStatus('Sign in again to edit this page.'); setLoading(false); return; } setUserId(actor.id);\n const rows = await (supabase as any).from('godmode_page_overrides').select('id,title,operations,metadata,updated_at,published_at').eq('tenant_scope', activeTenant.id).eq('route_path', location.pathname).eq('status', 'published').order('published_at', { ascending: false, nullsFirst: false });\n if (rows.error || cancelled) { setStatus('Could not load page edits.'); setLoading(false); return; }\n const row = (rows.data || []).find((item: OverrideRow) => item.title === 'Live page edits' || ['live-edit-v1','live-edit-v2','live-edit-v3'].includes(String(item.metadata?.source || ''))) as OverrideRow | undefined;\n const baseline = sanitizeLiveEditOperations((row?.operations as any[] | undefined)?.filter(isLiveEditOperation) || []), time = String(row?.published_at || row?.updated_at || '');\n const draft = await (supabase as any).from('godmode_page_overrides').select('operations,updated_at').eq('tenant_scope', activeTenant.id).eq('route_path', location.pathname).eq('status', 'draft').eq('title', 'Live page draft').order('updated_at', { ascending: false }).limit(1).maybeSingle();\n const stored = readWorkingCopy(liveEditStorageKey(actor.id, activeTenant.id, location.pathname)), draftOps = sanitizeLiveEditOperations(draft.data?.operations || []), recovered = stored?.savedAt ? stored.operations : draftOps.length ? draftOps : baseline;\n if (cancelled) return; setPublished(baseline); setPublishedAt(time); const next = createLiveEditHistory(recovered); historyRef.current = next; setHistory(next); transition(baseline, recovered); setStatus(stored?.savedAt ? 'Recovered your private working copy.' : draftOps.length ? 'Your saved draft is loaded.' : ''); setLoading(false);\n })();\n return () => { cancelled = true; };\n }, [on, activeTenant?.id, location.pathname]);\n\n useEffect(() => { if (!on || !storageKey || loading) return; try { if (!dirty) localStorage.removeItem(storageKey); else localStorage.setItem(storageKey, JSON.stringify({ operations, savedAt: new Date().toISOString(), basePublishedAt: publishedAt } satisfies StoredWorkingCopy)); } catch {} }, [on, storageKey, loading, dirty, operations, publishedAt]);\n\n useEffect(() => {\n if (!on) return;\n const click = (event: MouseEvent) => { const target = event.target as HTMLElement | null; if (!target || target.closest('[data-live-edit-toolbar=\"true\"]')) return; if (target.closest('[data-live-edit-lock=\"true\"]')) { event.preventDefault(); event.stopPropagation(); setSelected(null); setStatus('That system element is protected.'); return; } registerAutoLiveEditRoots(); const root = target.closest(ROOT); if (!root || !isSafeLiveEditKey(keyOf(root))) { setSelected(null); return; } event.preventDefault(); event.stopPropagation(); document.querySelectorAll('[data-live-edit-selected=\"true\"]').forEach((node) => delete node.dataset.liveEditSelected); root.dataset.liveEditSelected = 'true'; const targets = liveEditPropertyTargets(root); setSelected(targets.includes(target) ? target : root); setStatus(''); };\n const dbl = (event: MouseEvent) => { const target = event.target as HTMLElement | null, root = target?.closest(ROOT), text = target?.closest(TEXT); if (!root || !text || !liveEditTextTargets(root).includes(text)) return; event.preventDefault(); event.stopPropagation(); beginInline(text, root); };\n document.addEventListener('click', click, true); document.addEventListener('dblclick', dbl, true); return () => { document.removeEventListener('click', click, true); document.removeEventListener('dblclick', dbl, true); };\n }, [on]);\n\n useEffect(() => {\n if (!on) return; const editable = roots(); editable.forEach((root) => { root.draggable = true; }); let dragged = '', before: string[] = [];\n const start = (event: DragEvent) => { const root = (event.target as HTMLElement | null)?.closest(ROOT); if (!root?.parentElement || inlineRef.current) { event.preventDefault(); return; } dragged = keyOf(root); before = Array.from(root.parentElement.children).map((node) => node instanceof HTMLElement ? keyOf(node) : '').filter(Boolean); };\n const over = (event: DragEvent) => { if (dragged && (event.target as HTMLElement | null)?.closest(ROOT)) event.preventDefault(); };\n const drop = (event: DragEvent) => { const target = (event.target as HTMLElement | null)?.closest(ROOT), source = editable.find((node) => keyOf(node) === dragged); if (!target || !source || source === target || source.parentElement !== target.parentElement || !source.parentElement) return; event.preventDefault(); source.parentElement.insertBefore(source, target.nextSibling); const order = Array.from(source.parentElement.children).map((node) => node instanceof HTMLElement ? keyOf(node) : '').filter(Boolean); if (order.length <= 1) return; const anchor = [...order].sort()[0], id = `${anchor}:order:all`, current = historyRef.current.present, existing = current.find((o) => o.id === id); commit(upsertLiveEditOperation(current, { id, action: 'order', value: JSON.stringify(order), device: 'all', audit: { source: 'live-edit', route: location.pathname, componentKey: anchor, propertyKey: 'order', beforeValue: existing?.audit.beforeValue || JSON.stringify(before) } })); };\n document.addEventListener('dragstart', start, true); document.addEventListener('dragover', over, true); document.addEventListener('drop', drop, true); return () => { editable.forEach((root) => { root.draggable = false; }); document.removeEventListener('dragstart', start, true); document.removeEventListener('dragover', over, true); document.removeEventListener('drop', drop, true); };\n }, [on, location.pathname]);\n\n const selectedRoot = selected?.closest(ROOT) || null, selectedKey = selectedRoot ? keyOf(selectedRoot) : '', targetIndex = selected && selectedRoot ? Math.max(0, liveEditPropertyTargetIndex(selectedRoot, selected)) : 0;\n const selectedLabel = selectedRoot ? String(selectedRoot.querySelector('h1,h2,h3,h4')?.textContent || displayName(selected) || componentName(selectedKey)).trim() : '';\n const idFor = (action: LiveEditAction, propertyKey: string, scope = device) => `${selectedKey}:${propertyKey}:${action === 'text' || action === 'order' ? 'all' : scope}`;\n const opValue = (action: LiveEditAction, key: string, fallback = '') => operations.find((operation) => operation.id === idFor(action, key))?.value ?? fallback;\n const styleValue = (property: LiveEditStyleProperty) => opValue('style', `style.${targetIndex}.${property}`, computed(selected, property));\n const attrValue = (property: LiveEditAttributeProperty) => opValue('attribute', `attr.${targetIndex}.${property}`, selected?.getAttribute(property) || '');\n const textEditable = Boolean(selected && selectedRoot && liveEditTextTargets(selectedRoot).includes(selected));\n const selectedHidden = Boolean(selectedKey && operations.some((operation) => operation.action === 'visibility' && operation.audit.componentKey === selectedKey && (operation.device || 'all') === device));\n\n const setStyle = (property: LiveEditStyleProperty, value: string) => { if (!selected || !selectedKey || !isSafeLiveEditStyleProperty(property)) return; const propertyKey = `style.${targetIndex}.${property}`, id = idFor('style', propertyKey), current = historyRef.current.present, existing = current.find((o) => o.id === id); commit(upsertLiveEditOperation(current, { id, action: 'style', value: String(value).slice(0, 16000), device, audit: { source: 'live-edit', route: location.pathname, componentKey: selectedKey, propertyKey, beforeValue: existing?.audit.beforeValue ?? selected.style.getPropertyValue(cssName(property)) } })); setStatus(`${property} changed privately.`); };\n const setAttribute = (property: LiveEditAttributeProperty, value: string) => { if (!selected || !selectedKey || !isSafeLiveEditAttributeProperty(property)) return; if ((property === 'href' || property === 'src') && !isSafeLiveEditUrl(value)) { setStatus('Use a safe relative, https, mailto, tel, or image URL.'); return; } const propertyKey = `attr.${targetIndex}.${property}`, id = idFor('attribute', propertyKey), current = historyRef.current.present, existing = current.find((o) => o.id === id); commit(upsertLiveEditOperation(current, { id, action: 'attribute', value: String(value).slice(0, 16000), device, audit: { source: 'live-edit', route: location.pathname, componentKey: selectedKey, propertyKey, beforeValue: existing?.audit.beforeValue ?? selected.getAttribute(property) ?? '' } })); setStatus(`${property} changed privately.`); };\n const setText = (value: string) => { if (!selected || !selectedRoot || !selectedKey) return; const targets = liveEditTextTargets(selectedRoot), index = targets.indexOf(selected); if (selected !== selectedRoot && index < 0) return; const propertyKey = selected === selectedRoot ? 'self' : `text.${index}`, id = `${selectedKey}:${propertyKey}:all`, current = historyRef.current.present, existing = current.find((o) => o.id === id), before = existing?.audit.beforeText ?? selected.textContent ?? ''; commit(upsertLiveEditOperation(current, { id, action: 'text', value: value.slice(0, 2000), device: 'all', audit: { source: 'live-edit', route: location.pathname, componentKey: selectedKey, propertyKey, beforeText: before, beforeValue: existing?.audit.beforeValue ?? before } })); setStatus('Text changed privately.'); };\n const hide = () => { if (!selectedRoot || !selectedKey) return; const id = `${selectedKey}:visibility:${device}`, current = historyRef.current.present, existing = current.find((o) => o.id === id); commit(upsertLiveEditOperation(current, { id, action: 'visibility', value: 'hidden', device, audit: { source: 'live-edit', route: location.pathname, componentKey: selectedKey, propertyKey: 'visibility', beforeValue: existing?.audit.beforeValue ?? selectedRoot.style.display } })); };\n const show = () => commit(historyRef.current.present.filter((operation) => !(operation.action === 'visibility' && operation.audit.componentKey === selectedKey && (operation.device || 'all') === device)));\n const resetSection = () => selectedKey && commit(historyRef.current.present.filter((operation) => operation.audit.componentKey !== selectedKey));\n const resetPage = () => commit([]);\n\n const findDraft = async () => (supabase as any).from('godmode_page_overrides').select('id').eq('tenant_scope', activeTenant!.id).eq('route_path', location.pathname).eq('status', 'draft').eq('title', 'Live page draft').order('updated_at', { ascending: false }).limit(1).maybeSingle();\n const saveDraft = async () => { if (!activeTenant?.id || !userId) return false; const draft = await findDraft(), now = new Date().toISOString(), payload = { route_path: location.pathname, tenant_scope: activeTenant.id, device_scope: 'all', status: 'draft', title: 'Live page draft', operations, metadata: { source: 'live-edit-v3', basePublishedAt: publishedAt }, updated_by: userId, updated_at: now }; const result = draft.data?.id ? await (supabase as any).from('godmode_page_overrides').update(payload).eq('id', draft.data.id) : await (supabase as any).from('godmode_page_overrides').insert({ ...payload, created_by: userId, created_at: now }); setStatus(result.error ? 'Draft could not be saved.' : 'Draft saved privately.'); return !result.error; };\n const publish = async () => { if (!activeTenant?.id) return; setStatus('Publishing...'); const result = await (supabase as any).rpc('publish_live_edit_override', { _tenant_id: activeTenant.id, _route_path: location.pathname, _operations: operations }); if (result.error) { setStatus('Publish failed. Nothing was partially published.'); return; } const now = new Date().toISOString(), next = createLiveEditHistory(operations); setPublished(operations); setPublishedAt(now); historyRef.current = next; setHistory(next); if (storageKey) localStorage.removeItem(storageKey); setPanel(null); setStatus('Published. Everyone now sees this version.'); };\n const discard = async () => { transition(historyRef.current.present, published); const next = createLiveEditHistory(published); historyRef.current = next; setHistory(next); if (storageKey) localStorage.removeItem(storageKey); const draft = activeTenant?.id ? await findDraft() : null; if (draft?.data?.id) await (supabase as any).from('godmode_page_overrides').delete().eq('id', draft.data.id); };\n const loadHistory = async () => { if (!activeTenant?.id) return; const result = await (supabase as any).from('live_edit_revisions').select('id,operations,created_by,created_at').eq('tenant_id', activeTenant.id).eq('route_path', location.pathname).order('created_at', { ascending: false }).limit(20); if (!result.error) setRevisions(result.data || []); };\n const loadTemplates = async () => { const result = await (supabase as any).from('live_edit_templates').select('id,tenant_id,name,compatibility_tenant_type,route_pattern,operations,version,updated_at').order('updated_at', { ascending: false }).limit(100); if (!result.error) setTemplates(result.data || []); };\n const saveTemplate = async () => { if (!activeTenant?.id || !userId) return; const name = prompt('Template name'); if (!name?.trim()) return; await (supabase as any).from('live_edit_templates').insert({ tenant_id: activeTenant.id, name: name.trim(), compatibility_tenant_type: String(activeTenant.tenant_type || '*'), route_pattern: routeFamily, operations, created_by: userId, updated_by: userId }); void loadTemplates(); };\n\n const sidekickStyleProperties: LiveEditStyleProperty[] = ['color','backgroundColor','opacity','borderColor','borderWidth','borderStyle','borderRadius','boxShadow','width','height','minWidth','maxWidth','minHeight','maxHeight','padding','margin','gap','fontSize','fontWeight','lineHeight','letterSpacing','textAlign','display','flexDirection','justifyContent','alignItems','objectFit','overflow'];\n const sidekickPageStyleProperties: LiveEditStyleProperty[] = ['color','backgroundColor','opacity','borderColor','borderWidth','borderStyle','borderRadius','boxShadow','padding','margin','gap','fontSize','fontWeight','lineHeight','letterSpacing','textAlign','display','flexDirection','justifyContent','alignItems','objectFit','overflow'];\n const sidekickAttributeProperties: LiveEditAttributeProperty[] = ['href','target','src','alt','title','aria-label'];\n const sidekickPalette = () => [...new Set(roots().flatMap((root) => ['color','backgroundColor','borderColor'].map((property) => computed(root, property as LiveEditStyleProperty))).filter((value) => value && value !== 'transparent' && value !== 'rgba(0, 0, 0, 0)'))].slice(0, 16);\n const sidekickTargets = () => {\n const allRoots = roots().slice(0, 24);\n return allRoots.map((root) => {\n const rich = keyOf(root) === selectedKey;\n const propertyTargets = liveEditPropertyTargets(root).slice(0, rich ? 10 : 3);\n const allowedStyles = rich ? sidekickStyleProperties : sidekickPageStyleProperties;\n const nodes = propertyTargets.map((node, index) => ({ index, label: displayName(node).slice(0, 120), role: sidekickRole(node), tag: node.tagName.toLowerCase(), text: String(node.textContent || '').replace(/\\s+/g, ' ').trim().slice(0, 220), rect: sidekickRect(node) }));\n const styles = propertyTargets.flatMap((node, index) => allowedStyles.map((property) => ({ propertyKey: `style.${index}.${property}`, property, value: computed(node, property).slice(0, 500), label: displayName(node).slice(0, 120) })));\n const attributes = propertyTargets.flatMap((node, index) => sidekickAttributeProperties.flatMap((property) => {\n if ((property === 'href' || property === 'target') && !(node instanceof HTMLAnchorElement)) return [];\n if ((property === 'src' || property === 'alt') && !(node instanceof HTMLImageElement)) return [];\n return [{ propertyKey: `attr.${index}.${property}`, property, value: String(node.getAttribute(property) || '').slice(0, 1000), label: displayName(node).slice(0, 120) }];\n }));\n const siblingOrder = root.parentElement ? allRoots.filter((candidate) => candidate.parentElement === root.parentElement).map(keyOf).filter(isSafeLiveEditKey) : [];\n const parentRoot = root.parentElement?.closest(ROOT) || null;\n return {\n componentKey: keyOf(root),\n label: displayName(root),\n role: sidekickRole(root),\n rect: sidekickRect(root),\n parentKey: parentRoot && parentRoot !== root && isSafeLiveEditKey(keyOf(parentRoot)) ? keyOf(parentRoot) : null,\n nodes,\n texts: liveEditTextTargets(root).slice(0, 16).map((node, index) => ({ propertyKey: node === root ? 'self' : `text.${index}`, text: String(node.textContent || '').slice(0, 500) })),\n styles,\n attributes,\n siblingOrder,\n };\n });\n };\n const sidekickWorkingOperations = () => historyRef.current.present.slice(-36).map((operation) => ({ action: operation.action, componentKey: operation.audit.componentKey, propertyKey: operation.audit.propertyKey, value: String(operation.value || '').slice(0, 500), device: operation.device || 'all' }));\n const applySidekickOperations = (proposals: any[]) => {\n let next = historyRef.current.present, applied = 0;\n for (const proposal of proposals.slice(0, 36)) {\n const componentKey = String(proposal?.componentKey || ''), propertyKey = String(proposal?.propertyKey || ''), action = String(proposal?.action || ''), value = String(proposal?.value ?? ''), root = rootForKey(componentKey);\n if (!root || !isSafeLiveEditKey(componentKey) || !isSafeLiveEditKey(propertyKey)) continue;\n const requestedDevice = ['all','desktop','mobile'].includes(String(proposal?.device || '')) ? String(proposal.device) as LiveEditDevice : device;\n if (action === 'text') {\n const target = propertyKey === 'self' ? root : liveEditTextTargets(root)[Number(propertyKey.match(/^text\\.(\\d+)$/)?.[1] ?? -1)];\n if (!target) continue;\n const id = `${componentKey}:${propertyKey}:all`, existing = next.find((operation) => operation.id === id), before = target.textContent || '';\n next = upsertLiveEditOperation(next, { id, action: 'text', value: value.slice(0, 2000), device: 'all', audit: { source: 'live-edit', route: location.pathname, componentKey, propertyKey, beforeText: existing?.audit.beforeText ?? before, beforeValue: existing?.audit.beforeValue ?? before } });\n applied++; continue;\n }\n if (action === 'visibility' && propertyKey === 'visibility') {\n if (value === 'visible') {\n const filtered = next.filter((operation) => !(operation.action === 'visibility' && operation.audit.componentKey === componentKey));\n if (filtered.length !== next.length) { next = filtered; applied++; }\n continue;\n }\n if (value !== 'hidden') continue;\n const id = `${componentKey}:visibility:${requestedDevice}`, existing = next.find((operation) => operation.id === id);\n next = upsertLiveEditOperation(next, { id, action: 'visibility', value: 'hidden', device: requestedDevice, audit: { source: 'live-edit', route: location.pathname, componentKey, propertyKey: 'visibility', beforeValue: existing?.audit.beforeValue ?? root.style.display } });\n applied++; continue;\n }\n if (action === 'style') {\n const property = propertyKey.match(/^style\\.\\d+\\.([A-Za-z0-9-]+)$/)?.[1] || '', target = liveEditTargetForPropertyKey(root, propertyKey);\n if (!target || !isSafeLiveEditStyleProperty(property)) continue;\n const id = `${componentKey}:${propertyKey}:${requestedDevice}`, existing = next.find((operation) => operation.id === id);\n next = upsertLiveEditOperation(next, { id, action: 'style', value: value.slice(0, 16000), device: requestedDevice, audit: { source: 'live-edit', route: location.pathname, componentKey, propertyKey, beforeValue: existing?.audit.beforeValue ?? target.style.getPropertyValue(cssName(property)) } });\n applied++; continue;\n }\n if (action === 'attribute') {\n const property = propertyKey.match(/^attr\\.\\d+\\.([A-Za-z0-9-]+)$/)?.[1] || '', target = liveEditTargetForPropertyKey(root, propertyKey);\n if (!target || !isSafeLiveEditAttributeProperty(property) || ((property === 'href' || property === 'src') && !isSafeLiveEditUrl(value)) || (property === 'target' && !['','_self','_blank'].includes(value))) continue;\n const id = `${componentKey}:${propertyKey}:${requestedDevice}`, existing = next.find((operation) => operation.id === id);\n next = upsertLiveEditOperation(next, { id, action: 'attribute', value: value.slice(0, 16000), device: requestedDevice, audit: { source: 'live-edit', route: location.pathname, componentKey, propertyKey, beforeValue: existing?.audit.beforeValue ?? target.getAttribute(property) ?? '' } });\n applied++; continue;\n }\n if (action === 'order' && propertyKey === 'order' && root.parentElement) {\n try {\n const requested = JSON.parse(value), currentOrder = roots().filter((node) => node.parentElement === root.parentElement).map(keyOf).filter(isSafeLiveEditKey);\n if (!Array.isArray(requested) || requested.length !== currentOrder.length || new Set(requested).size !== requested.length || !requested.every((key) => currentOrder.includes(String(key)))) continue;\n const anchor = [...currentOrder].sort()[0], id = `${anchor}:order:all`, existing = next.find((operation) => operation.id === id);\n next = upsertLiveEditOperation(next, { id, action: 'order', value: JSON.stringify(requested), device: 'all', audit: { source: 'live-edit', route: location.pathname, componentKey: anchor, propertyKey: 'order', beforeValue: existing?.audit.beforeValue ?? JSON.stringify(currentOrder) } });\n applied++;\n } catch {}\n }\n }\n if (applied) commit(next);\n return applied;\n };\n const askSidekick = async () => {\n const instruction = sidekickInput.trim(); if (!instruction || sidekickBusy || !activeTenant?.id) return;\n const priorTurns = sidekickTurns.slice(-8);\n setSidekickBusy(true);\n setSidekickReply('Reading the page and working out the strongest useful change…');\n try {\n const { data, error } = await supabase.functions.invoke('operator-respond', { body: { action: 'live_edit_plan', instruction, liveEditContext: { tenantId: activeTenant.id, tenantName: activeTenant.name, tenantType: activeTenant.tenant_type, routePath: location.pathname, selectedComponentKey: selectedKey || null, selectedLabel: selectedLabel || null, selectedTargetIndex: selected ? targetIndex : null, deviceScope: device, viewport: { width: window.innerWidth, height: window.innerHeight }, pagePalette: sidekickPalette(), workingOperations: sidekickWorkingOperations(), conversation: priorTurns, targets: sidekickTargets() }, sidekickContext: { mode: 'live-edit', tenantId: activeTenant.id, tenantType: activeTenant.tenant_type, route: location.pathname } } });\n if (error || !data?.ok) throw new Error(data?.error || error?.message || 'Sidekick could not complete that edit.');\n const applied = applySidekickOperations(Array.isArray(data.operations) ? data.operations : []);\n const message = String(data.message || (applied ? `I made ${applied} coordinated private change${applied === 1 ? '' : 's'}.` : 'I understood the request, but I could not find a confident safe improvement from this page state.'));\n setSidekickTurns((turns) => [...turns, { role: 'user', content: instruction }, { role: 'assistant', content: message }].slice(-10));\n setSidekickReply(applied ? `${message} · Undo is ready; nothing is published until you Review and Publish.` : message);\n if (applied) setSidekickInput('');\n } catch (error: any) {\n const message = error?.message || 'Sidekick could not complete that edit. Your private working copy is unchanged.';\n setSidekickTurns((turns) => [...turns, { role: 'user', content: instruction }, { role: 'assistant', content: message }].slice(-10));\n setSidekickReply(message);\n }\n finally { setSidekickBusy(false); }\n };\n\n const closePublished = () => { transition(historyRef.current.present, published); applyPublished(published); setOn(false); setPanel(null); setSelected(null); setStatus(''); };\n const done = () => { if (inlineRef.current) finishInline('commit'); if (dirty) { setPanel('exit'); return; } closePublished(); };\n const compatibleTemplates = templates.filter((template) => (template.compatibility_tenant_type === '*' || template.compatibility_tenant_type === String(activeTenant?.tenant_type || '')) && (template.route_pattern === '*' || template.route_pattern === routeFamily));\n\n if (!canEdit) return null;\n if (!on) return ;\n\n const styleFields: Array<[LiveEditStyleProperty, string]> = [['width','Width'],['height','Height'],['minWidth','Min width'],['maxWidth','Max width'],['minHeight','Min height'],['maxHeight','Max height'],['padding','Padding'],['margin','Margin'],['gap','Gap'],['fontSize','Font size'],['lineHeight','Line height'],['letterSpacing','Letter spacing'],['borderWidth','Border width'],['borderRadius','Corners'],['boxShadow','Shadow']];\n const selectFields: Array<[LiveEditStyleProperty,string,string[]]> = [['display','Display',['block','flex','grid','inline-flex','inline-block']],['flexDirection','Direction',['row','column','row-reverse','column-reverse']],['justifyContent','Horizontal',['normal','flex-start','center','flex-end','space-between','space-around']],['alignItems','Vertical',['normal','flex-start','center','flex-end','stretch']],['textAlign','Text align',['left','center','right','start','end']],['fontWeight','Weight',['400','500','600','700','800']],['borderStyle','Border style',['none','solid','dashed','dotted']],['overflow','Overflow',['visible','hidden','auto','scroll']]];\n\n return <>\n \n
\n
\n
GodModePrivate{pending.length} unpublished
Select what you want to change. Double-click text to edit directly.
{dirty ? : null}
\n {selected ?
Selected: {displayName(selected)}{textEditable ? : null}{selectedHidden ? : }
:
Tap a safe element to open its properties.
}\n {selected ?
Properties

Content, layout, type, appearance, links/media, and responsive scope.

{(['all','desktop','mobile'] as LiveEditDevice[]).map((item) => )}
\n

Content & action

{textEditable ?