SIMON Master Console Rebuild

File viewer

guarded to /htdocs

/web360/Demo/workspace.php

<?php require_once __DIR__.'/core/bootstrap.php'; $csrf = w360_csrf(); $file = $_GET['file'] ?? 'projects/demo/index.php'; if (!w360_allowed_file($file)) $file='projects/demo/index.php'; ?>
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><title>WEB360 Workspace</title><link rel="stylesheet" href="assets/web360.css"></head>
<body><div class="app-shell"><?php include __DIR__.'/ui/chrome.php'; ?>
<div class="workspace-clean">
<aside class="panel card"><h2>Files</h2><input id="search" placeholder="Search files"><div id="tree" class="tree"></div></aside>
<main class="panel">
<div class="toolbar"><input id="filePath" value="<?=htmlspecialchars($file,ENT_QUOTES,'UTF-8')?>"><button onclick="openFile()" data-label="Open">Open</button><button onclick="saveFile()">Save</button><button onclick="checkpoint()">Checkpoint</button><button onclick="runPreview()">Run</button><button onclick="document.documentElement.requestFullscreen?.()">Full</button></div>
<textarea id="editor" class="editor" spellcheck="false"></textarea>
<div id="saveStatus" class="muted"></div>
</main>
<aside class="panel card aiBox"><h2>SIMON Command</h2>
<label>Instruction</label><textarea id="aiPrompt" placeholder="Tell SIMON exactly what to do. Example: Fix the white screen and keep the design. Return complete corrected PHP."></textarea>
<label>Job Type</label><select id="jobType"><option value="auto">Auto</option><option value="debug">Debug</option><option value="code">Code</option><option value="design">Design</option><option value="security">Security</option><option value="vision">Canvas / Screenshot</option></select>
<label>Provider</label><select id="provider"><option value="auto">Auto</option><option value="freeai">Free AI Local</option><option value="openai">OpenAI</option><option value="anthropic">Claude</option><option value="gemini">Gemini</option><option value="grok">Grok</option><option value="deepseek">DeepSeek</option><option value="openrouter">OpenRouter</option></select>
<label>Bounce</label><select id="bounce"><option value="off">Off</option><option value="review">Review</option><option value="compare">Compare</option></select>
<div class="grid two"><button class="primary" onclick="askAI()">Run AI</button><button onclick="applyAI()">Apply</button></div>
<pre id="aiOut">AI result appears here.</pre></aside>
</div></div>
<script>
const csrf = <?= json_encode($csrf) ?>; let lastAI='';
function $(id){return document.getElementById(id)}
async function api(action,data={},post=false){if(!post)return fetch('api/router.php?action='+action+'&'+new URLSearchParams(data),{cache:'no-store'}).then(r=>r.json());const f=new FormData();f.append('csrf',csrf);Object.entries(data).forEach(([k,v])=>f.append(k,v));return fetch('api/router.php?action='+action,{method:'POST',body:f}).then(r=>r.json())}
async function loadTree(){let r=await api('tree');let q=$('search').value.toLowerCase();$('tree').innerHTML=(r.items||[]).filter(p=>!q||p.toLowerCase().includes(q)).map(p=>`<button onclick="openPath(${JSON.stringify(p).replaceAll('"','&quot;')})">${p}</button>`).join('')}
function openPath(p){$('filePath').value=p;openFile()}
async function openFile(){ $('saveStatus').textContent='Opening...';let r=await api('open_file',{path:$('filePath').value}); if(r.ok){$('editor').value=r.content;$('filePath').value=r.path;$('saveStatus').innerHTML='<span class="status ok">Opened '+r.path+'</span>'}else{$('saveStatus').innerHTML='<span class="status bad">'+r.error+'</span>'}}
async function saveFile(){let r=await api('save_file',{path:$('filePath').value,content:$('editor').value},true);if(r.ok){$('saveStatus').innerHTML='<span class="status ok">Saved · '+r.bytes+' bytes · lint '+(r.lint.ok?'OK':'CHECK')+'</span>'}else{$('saveStatus').innerHTML='<span class="status bad">'+r.error+'</span>'}loadTree()}
async function checkpoint(){let r=await api('checkpoint',{path:$('filePath').value,content:$('editor').value},true);if(r.ok){$('saveStatus').innerHTML='<span class="status ok">Checkpoint: '+(r.snapshot||'new file')+'</span>'}else{$('saveStatus').innerHTML='<span class="status bad">'+r.error+'</span>'}}
function runPreview(){window.open('viewer.php?file='+encodeURIComponent($('filePath').value),'_blank')}
async function askAI(){await checkpoint();let prompt=$('aiPrompt').value.trim()||'Review this file and fix issues. Return complete corrected file if needed.';prompt+="\\n\\nSOURCE FILE: "+$('filePath').value+"\\n\\nCONTENT:\\n"+$('editor').value.slice(0,30000);$('aiOut').textContent='SIMON AI running...';let r=await api('ai',{prompt,type:$('jobType').value,provider:$('provider').value,bounce:$('bounce').value,source_file:$('filePath').value},true);lastAI=r.result?.text||'';$('aiOut').textContent=r.ok?lastAI:JSON.stringify(r,null,2)}
function applyAI(){if(!lastAI)return alert('Run AI first.');$('editor').value=lastAI;$('saveStatus').innerHTML='<span class="status warn">AI applied. Save or checkpoint.</span>'}
let t;$('editor').addEventListener('input',()=>{clearTimeout(t);t=setTimeout(saveFile,3500)});$('search').addEventListener('input',loadTree);loadTree();openFile();
</script></body></html>

Quick jump

open a path

True command center for SIMON + WEB360

File viewer

Quick jump