fix(opax): Fix 4 — Browser → Docs Browser, marked.js render, default MASTERPLAN.md

This commit is contained in:
chrischristiansen-glitch 2026-06-13 15:56:13 +02:00
parent b5c03d4d44
commit 3cc6a83885

View File

@ -287,16 +287,13 @@
.roi-divider{width:1px;height:60px;background:var(--border);flex-shrink:0}
@media(max-width:600px){.roi-divider{display:none}.roi-box{gap:16px}}
/* BROWSER PANEL */
.browser-bar{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--bg-2);flex-shrink:0}
.browser-url-input{flex:1;background:var(--bg-3);border:1px solid var(--border);border-radius:8px;padding:6px 12px;font-family:var(--mono);font-size:12px;color:var(--text);outline:none;transition:border-color .2s}
.browser-url-input:focus{border-color:var(--accent)}
.browser-url-input::placeholder{color:var(--text-faint)}
.browser-go-btn{padding:6px 14px;border-radius:8px;background:var(--accent);color:#fff;font-size:12px;font-weight:600;transition:background .14s;white-space:nowrap}
.browser-go-btn:hover{background:#6a4cff}
.browser-frame{flex:1;border:none;width:100%;height:100%;background:var(--bg)}
.browser-error{display:none;flex:1;align-items:center;justify-content:center;flex-direction:column;gap:12px;color:var(--text-faint);font-family:var(--mono);font-size:13px}
.browser-error.show{display:flex}
/* DOCS BROWSER PANEL — Fix 4 */
.docsbrowser-toolbar{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--bg-2);flex-shrink:0}
.docsbrowser-select{flex:1;background:var(--bg-3);border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-family:var(--mono);font-size:12px;color:var(--text);outline:none;cursor:pointer;transition:border-color .2s}
.docsbrowser-select:focus{border-color:var(--accent)}
.docsbrowser-refresh{padding:6px 14px;border-radius:8px;background:var(--accent);color:#fff;font-size:12px;font-weight:600;transition:background .14s;white-space:nowrap}
.docsbrowser-refresh:hover{background:#6a4cff}
.docsbrowser-body{flex:1;overflow-y:auto}
</style>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked@12/marked.min.js"></script>
@ -348,7 +345,7 @@
<span class="nav-icon">📄</span> MD
</div>
<div class="nav-item" onclick="go('browser')" id="nav-browser">
<span class="nav-icon">🌐</span> Browser
<span class="nav-icon">📖</span> Docs Browser
</div>
<div class="side-foot">
@ -583,28 +580,35 @@
</div>
</div>
<!-- BROWSER -->
<!-- DOCS BROWSER — Fix 4: markdown-only, no iframe, no external URLs -->
<div class="panel" id="panel-browser">
<div class="panel-head">
<div class="p-avatar" style="background:linear-gradient(135deg,#5c8fff,#7c5cff)">🌐</div>
<div class="p-avatar" style="background:linear-gradient(135deg,#5c8fff,#7c5cff)">📖</div>
<div>
<div class="p-title">Browser</div>
<div class="p-sub">Intern dokumentasjonsleser · /docs/ proxy</div>
<div class="p-title">Docs Browser</div>
<div class="p-sub" id="docsbrowser-sub">docs/MASTERPLAN.md</div>
</div>
<div class="p-actions">
<button class="hbtn" onclick="browserRefresh()">↻ Refresh</button>
<a class="hbtn" id="docsbrowser-gh-btn" href="https://github.com/vauco-saas/OSVauco/blob/main/docs/MASTERPLAN.md" target="_blank">GitHub ↗</a>
<button class="hbtn" onclick="docsBrowserLoad()">↻ Refresh</button>
</div>
</div>
<div class="browser-bar">
<input id="browser-url" class="browser-url-input" type="text" placeholder="https://... eller /docs/MASTERPLAN.md" onkeydown="if(event.key==='Enter')browserNav()">
<button class="browser-go-btn" onclick="browserNav()">Gå →</button>
<div class="docsbrowser-toolbar">
<select id="docsbrowser-select" class="docsbrowser-select" onchange="docsBrowserSelect(this.value)">
<option value="docs/MASTERPLAN.md">🏛️ MASTERPLAN</option>
<option value="docs/ROADMAP.md">🗺️ ROADMAP</option>
<option value="docs/HANDOFF.md">🤝 HANDOFF</option>
<option value="docs/AGENT_RULEBOOK.md">📏 AGENT RULEBOOK</option>
<option value="docs/LEARNINGS.md">📚 LEARNINGS</option>
<option value="docs/gemma/world.md">🌍 EMMA world.md</option>
<option value="docs/ARCHITECTURE.md">🏗️ ARCHITECTURE</option>
<option value="AGENTS.md">🤖 AGENTS</option>
</select>
<button class="docsbrowser-refresh" onclick="docsBrowserLoad()">Last inn →</button>
</div>
<div id="browser-error" class="browser-error">
<span style="font-size:32px">⚠️</span>
<span id="browser-error-msg">Kunne ikke laste siden</span>
<div class="docsbrowser-body">
<div class="md-viewer" id="docsbrowser-viewer"></div>
</div>
<iframe id="browser-frame" class="browser-frame" src="" sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
onload="browserFrameLoad()" onerror="browserFrameError()"></iframe>
</div>
</div><!-- /panels -->
@ -642,7 +646,7 @@ const PANEL_META = {
sites: ['Sites & Moduler', 'Alle Vauco-flater'],
terminal: ['Terminal', 'OPAX agent · Cloud Run'],
md: ['MD — Dokumenter', 'Kjerndoks · vauco-saas/OSVauco'],
browser: ['Browser', 'Intern dokumentasjonsleser · /docs/ proxy'],
browser: ['Docs Browser', 'Intern dokumentasjonsleser · /docs/ proxy'],
}
const SITES_DATA = [
@ -736,6 +740,7 @@ function go(name){
if(name==='terminal') initTerminal()
if(name==='md') renderMdGrid()
if(name==='pricing') initPricing()
if(name==='browser') docsBrowserInit()
}
function initPricing(){
@ -744,22 +749,33 @@ function initPricing(){
updatePricing(slider.value)
}
// BROWSER PANEL
function browserNav(){
const raw = document.getElementById('browser-url').value.trim()
if(!raw) return
const url = raw.startsWith('http') ? raw : '/docs/'+raw.replace(/^\/docs\//,'')
document.getElementById('browser-error').classList.remove('show')
document.getElementById('browser-frame').src = url
// DOCS BROWSER — Fix 4: /docs/ proxy only, marked.js rendering, no external URLs
let _docsBrowserLoaded = false
function docsBrowserInit(){
if(_docsBrowserLoaded) return
_docsBrowserLoaded = true
docsBrowserLoad()
}
function browserRefresh(){
const f = document.getElementById('browser-frame')
if(f.src) f.src = f.src
async function docsBrowserLoad(){
const sel = document.getElementById('docsbrowser-select')
const path = sel ? sel.value : 'docs/MASTERPLAN.md'
const viewer = document.getElementById('docsbrowser-viewer')
viewer.innerHTML = '<div class="md-viewer-loading"><span style="animation:pulse 1s infinite"></span> Laster '+esc(path)+'...</div>'
document.getElementById('docsbrowser-sub').textContent = path
document.getElementById('docsbrowser-gh-btn').href = GH_BLOB + path
try{
const res = await fetch('/docs/'+path+'?t='+Date.now())
if(!res.ok) throw new Error('HTTP '+res.status)
const raw = await res.text()
viewer.innerHTML = marked.parse(raw)
}catch(e){
viewer.innerHTML = '<div class="md-viewer-loading">❌ Kunne ikke laste: '+esc(e.message)+'</div>'
}
}
function browserFrameLoad(){ document.getElementById('browser-error').classList.remove('show') }
function browserFrameError(){
document.getElementById('browser-error-msg').textContent = 'Siden kunne ikke lastes — sjekk URL eller /docs/-proxy'
document.getElementById('browser-error').classList.add('show')
function docsBrowserSelect(path){
docsBrowserLoad()
}
// BUILD STATUS POLL
@ -1103,4 +1119,4 @@ renderTierGrid(5000)
updatePricing(5000)
</script>
</body>
</html>
</html>