app/my/index.html

<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>My Phast</title><style>
:root{--b:#f5f3ee;--i:#121211;--m:#77746c;--l:#d5d1c8;--o:#ff4d00}*{box-sizing:border-box}body{margin:0;background:var(--b);color:var(--i);font:14px system-ui,sans-serif}button,input{font:inherit}button{cursor:pointer}main{max-width:1120px;margin:auto;padding:30px}.top,.bar{display:flex;justify-content:space-between;align-items:center;gap:16px}.brand{font-size:30px;font-weight:800;letter-spacing:-2px}.brand b,.tag{color:var(--o)}.mcp,.tag{font:10px ui-monospace,monospace}.mcp{border:0;border-bottom:1px solid var(--l);background:0;color:var(--m)}.hero{margin:75px 0 48px;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:end}.hero h1{font-size:clamp(54px,8vw,96px);line-height:.85;letter-spacing:-7px;margin:0}.hero p{color:var(--m);line-height:1.6;max-width:430px}.hero strong{color:var(--i)}.bar{border-top:1px solid;padding:14px 0}.bar h2{font-size:16px}.btn{border:1px solid var(--l);background:transparent;padding:9px 12px}.primary{background:var(--i);color:var(--b);border-color:var(--i)}.primary:hover{background:var(--o);border-color:var(--o)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.widget{min-height:180px;border:1px solid var(--l);padding:18px;background:#faf9f5;display:flex;flex-direction:column;justify-content:space-between;position:relative}.wide{grid-column:span 2}.widget h3{font-size:24px;letter-spacing:-1px;margin:8px 0}.widget p{color:var(--m);font-size:12px;line-height:1.5}.empty{border-style:dashed;background:transparent;text-align:center;justify-content:center}.edit .widget:not(.empty){outline:1px dashed var(--o);outline-offset:-5px}.edit .widget:not(.empty):after{content:"⋮";position:absolute;right:12px;top:8px;color:var(--o)}.drawer{position:fixed;right:0;top:0;height:100%;width:min(450px,100%);background:#faf9f5;border-left:1px solid var(--l);padding:25px;transform:translateX(100%);transition:.2s;z-index:2}.drawer.open{transform:none}.search{width:100%;padding:12px;border:1px solid var(--l);background:0}.provider{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid var(--l)}.provider small{display:block;color:var(--m);margin-top:5px}.foot{margin-top:50px;border-top:1px solid var(--l);padding-top:14px;display:flex;justify-content:space-between;color:var(--m);font:10px ui-monospace,monospace}@media(max-width:700px){.hero{grid-template-columns:1fr}.grid{grid-template-columns:1fr}.wide{grid-column:auto}}
</style></head><body><main id="home"><header class="top"><div class="brand">phast<b>.</b></div><button class="mcp" id="copy">my.phast.app/mcp ↗</button></header>
<section class="hero"><h1>Your tool belt.</h1><p><strong>Connect your tools once. Bring them anywhere.</strong><br>One MCP for ChatGPT, Claude, Codex, or whatever comes next. Your home is the human side of the same composition.</p></section>
<div class="bar"><h2>My Home</h2><div><button class="btn" id="edit">Edit Home</button> <button class="btn primary add">+ Add Widget</button></div></div>
<section class="grid" id="grid"><article class="widget wide"><div><span class="tag">PHAST · TOOL BELT</span><h3>Ready to connect</h3><p>Add a provider and its tools become available through this Phast MCP. Credentials stay delegated to Persimmons.</p></div><span class="tag">0 CONNECTED PROVIDERS</span></article><article class="widget"><div><span class="tag">ORACLE</span><h3>Provider search</h3><p>Discover MCP providers, OAuth routes and capabilities from the machine graph.</p></div><span class="tag">DISCOVERY</span></article><button class="widget empty add"><strong>＋<br>Add widget</strong><p>Provider tools + Prefab surfaces</p></button></section>
<footer class="foot"><span>human: my.phast.app</span><span>agent: /mcp</span></footer></main>
<aside class="drawer" id="drawer"><div class="top"><div><span class="tag">ADD WIDGET</span><h2>Find a provider</h2></div><button class="btn" id="close">Close</button></div><input class="search" id="search" placeholder="Search MCP, OAuth, tools…"><div id="providers">
<div class="provider" data-q="oracle mcp provider search"><div><strong>Search with Oracle</strong><small>Discover providers from the capability graph.</small></div><button class="btn">Search</button></div>
<div class="provider" data-q="tea teahub status prefab"><div><strong>Tea</strong><small>Existing Prefab status surface.</small></div><button class="btn install" data-name="Tea status">Add</button></div>
<div class="provider" data-q="persimmons secrets connections"><div><strong>Connections</strong><small>Phast view over Persimmons-backed connections.</small></div><button class="btn install" data-name="Connections">Add</button></div></div>
<p style="color:var(--m);font-size:11px;line-height:1.5">V0 gallery is tiny on purpose. Next: query Oracle and derive widget choices from provider tools and Prefab resources.</p></aside>
<script>const h=document.querySelector('#home'),d=document.querySelector('#drawer');document.querySelectorAll('.add').forEach(x=>x.onclick=()=>d.classList.add('open'));close.onclick=()=>d.classList.remove('open');edit.onclick=e=>{h.classList.toggle('edit');e.target.textContent=h.classList.contains('edit')?'Done':'Edit Home'};copy.onclick=()=>navigator.clipboard?.writeText('https://my.phast.app/mcp');search.oninput=e=>document.querySelectorAll('.provider').forEach(x=>x.hidden=!x.dataset.q.includes(e.target.value.toLowerCase()));document.querySelectorAll('.install').forEach(b=>b.onclick=()=>{let w=document.createElement('article');w.className='widget';w.innerHTML='<div><span class="tag">PREFAB WIDGET</span><h3>'+b.dataset.name+'</h3><p>Draft widget. Chat and Home will edit the same phast.json.</p></div><span class="tag">DRAFT</span>';grid.insertBefore(w,grid.lastElementChild);d.classList.remove('open')});</script></body></html>