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

static/opax.html

@@ -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 */
+  /* DOCS BROWSER PANEL — Fix 4 */
-  .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}
+  .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}
-  .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}
+  .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}
-  .browser-url-input:focus{border-color:var(--accent)}
+  .docsbrowser-select:focus{border-color:var(--accent)}
-  .browser-url-input::placeholder{color:var(--text-faint)}
+  .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}
-  .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}
+  .docsbrowser-refresh:hover{background:#6a4cff}
-  .browser-go-btn:hover{background:#6a4cff}
+  .docsbrowser-body{flex:1;overflow-y:auto}
-  .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}
 </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-title">Docs Browser</div>
-          <div class="p-sub">Intern dokumentasjonsleser · /docs/ proxy</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">
+      <div class="docsbrowser-toolbar">
-        <input id="browser-url" class="browser-url-input" type="text" placeholder="https://... eller /docs/MASTERPLAN.md" onkeydown="if(event.key==='Enter')browserNav()">
+        <select id="docsbrowser-select" class="docsbrowser-select" onchange="docsBrowserSelect(this.value)">
-        <button class="browser-go-btn" onclick="browserNav()">Gå →</button>
+          <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">
+      <div class="docsbrowser-body">
-        <span style="font-size:32px">⚠️</span>
+        <div class="md-viewer" id="docsbrowser-viewer"></div>
-        <span id="browser-error-msg">Kunne ikke laste siden</span>
       </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
+// DOCS BROWSER — Fix 4: /docs/ proxy only, marked.js rendering, no external URLs
-function browserNav(){
+let _docsBrowserLoaded = false
-  const raw = document.getElementById('browser-url').value.trim()
+function docsBrowserInit(){
-  if(!raw) return
+  if(_docsBrowserLoaded) return
-  const url = raw.startsWith('http') ? raw : '/docs/'+raw.replace(/^\/docs\//,'')
+  _docsBrowserLoaded = true
-  document.getElementById('browser-error').classList.remove('show')
+  docsBrowserLoad()
-  document.getElementById('browser-frame').src = url
 }
-function browserRefresh(){
+
-  const f = document.getElementById('browser-frame')
+async function docsBrowserLoad(){
-  if(f.src) f.src = f.src
+  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(){
+function docsBrowserSelect(path){
-  document.getElementById('browser-error-msg').textContent = 'Siden kunne ikke lastes — sjekk URL eller /docs/-proxy'
+  docsBrowserLoad()
-  document.getElementById('browser-error').classList.add('show')
 }
 
 // BUILD STATUS POLL
@@ -1103,4 +1119,4 @@ renderTierGrid(5000)
 updatePricing(5000)
 </script>
 </body>
-</html>
+</html>