From b7e4e4328381a3cc3ddc0835bfa8693a156f7c28 Mon Sep 17 00:00:00 2001
From: matcha <jordan@streetpulse.com>
Date: Sun, 4 Oct 2026 06:06:17 +0000
Subject: [PATCH] Make My Phast onboarding fast and agent-first

---
 my/index.html | 59 +++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 46 insertions(+), 13 deletions(-)

diff --git a/my/index.html b/my/index.html
index 5d9daec..ad3bc72 100644
--- a/my/index.html
+++ b/my/index.html
@@ -1,13 +1,46 @@
-<!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>
\ No newline at end of file
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="theme-color" content="#050505">
+<title>My Phast</title>
+<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Bangers&family=DM+Mono:wght@400;500&family=Inter:wght@500;700;900&display=swap" rel="stylesheet">
+<style>
+:root{--bg:#050505;--panel:#0d0d0d;--panel2:#111;--ink:#f7f3e9;--muted:#7d7d78;--orange:#ff5a00;--line:#272727;--pad:clamp(20px,3.5vw,52px)}
+*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif}button,a,input{font:inherit;color:inherit}a{text-decoration:none}button{cursor:pointer}
+.page{min-height:100svh;padding:var(--pad);position:relative;overflow:hidden}.page:before{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(118deg,transparent 0 110px,rgba(255,90,0,.035) 110px 112px,transparent 112px 220px)}.top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-family:Bangers,sans-serif;color:var(--orange);font-size:30px;letter-spacing:.06em}.topnote{font:10px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
+.hero{position:relative;margin:clamp(70px,10vh,130px) 0 54px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.55fr);gap:clamp(32px,7vw,100px);align-items:end}.kicker,.label,.mono{font:10px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.11em}.kicker{color:var(--orange);margin:0 0 10px}.hero h1{font-family:Bangers,sans-serif;font-weight:400;font-size:clamp(78px,12vw,170px);line-height:.75;letter-spacing:.02em;margin:0;color:var(--orange);text-shadow:5px 5px 0 #1c1c1c;transform:skewY(-1deg)}.hero h1 span{color:var(--ink);display:block;font-size:.43em;line-height:.95;margin-top:.2em}.intro{border-top:1px solid var(--line);padding-top:18px}.intro p{font-size:17px;line-height:1.5;margin:0 0 20px;color:#d7d4cc}.intro strong{color:var(--orange)}
+.connector{background:var(--orange);color:#070707;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:20px;border:0;width:100%;font-weight:900;text-transform:uppercase;transform:skewX(-6deg);transition:.14s}.connector span{transform:skewX(6deg)}.connector:hover{transform:skewX(-6deg) translate(4px,-3px);box-shadow:-7px 7px 0 #fff}.endpoint{margin-top:11px;font:10px "DM Mono",monospace;color:var(--muted);word-break:break-all}
+.lane{position:relative;border-top:1px solid var(--orange);padding-top:12px}.lanehead{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.lanehead h2{font-family:Bangers,sans-serif;font-size:32px;letter-spacing:.05em;margin:0}.lanehead span{color:var(--orange)}
+.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.step{background:var(--panel);padding:22px;min-height:200px;position:relative;overflow:hidden}.step:after{content:attr(data-n);position:absolute;right:6px;bottom:-34px;font-family:Bangers,sans-serif;color:#171717;font-size:125px;line-height:1}.step .label{color:var(--orange);position:relative;z-index:1}.step h3{font-family:Bangers,sans-serif;font-size:36px;letter-spacing:.04em;margin:13px 0 8px;position:relative;z-index:1}.step p{color:var(--muted);font-size:12px;line-height:1.55;max-width:30ch;position:relative;z-index:1}.cmd{margin-top:15px;border:1px solid #333;background:#080808;padding:10px 12px;font:11px "DM Mono",monospace;color:#bbb;position:relative;z-index:1}.cmd b{color:var(--orange);font-weight:500}
+.what{display:grid;grid-template-columns:1.15fr .85fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:26px}.card{background:var(--panel2);padding:22px}.card h3{font-family:Bangers,sans-serif;letter-spacing:.04em;font-size:30px;margin:6px 0 10px}.card p{font-size:12px;line-height:1.6;color:var(--muted);max-width:60ch}.belt{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}.pill{border:1px solid #353535;padding:7px 9px;font:9px "DM Mono",monospace;text-transform:uppercase;color:#aaa}.pill.hot{border-color:var(--orange);color:var(--orange)}
+.foot{display:flex;justify-content:space-between;gap:20px;margin-top:42px;padding-top:13px;border-top:1px solid var(--line);font:9px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.1em;color:#60605d}.foot b{color:var(--orange);font-weight:500}.toast{position:fixed;right:24px;bottom:24px;background:var(--orange);color:#000;padding:10px 12px;font:10px "DM Mono",monospace;text-transform:uppercase;opacity:0;transform:translateY(8px);transition:.14s}.toast.show{opacity:1;transform:none}
+@media(max-width:850px){.hero{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.step{min-height:150px}.what{grid-template-columns:1fr}.hero h1{font-size:clamp(86px,23vw,140px)}}@media(max-width:500px){.topnote{display:none}.page{padding:20px}.hero{margin-top:70px}}
+</style>
+</head>
+<body>
+<main class="page">
+<header class="top"><a class="brand" href="https://phast.app">PHAST.</a><span class="topnote">MY PHAST // CONTROL MCP</span></header>
+<section class="hero">
+<div><p class="kicker">START HERE // ONE CONNECTION</p><h1>YOUR MCP.<span>BUILT PHAST.</span></h1></div>
+<div class="intro"><p>Add <strong>My Phast</strong> to your agent once. Then create personal MCPs, add tools, stream Prefab, and keep what works.</p><button class="connector" id="copy"><span>COPY MY PHAST MCP</span><span>↗</span></button><div class="endpoint">https://my.phast.app/mcp</div></div>
+</section>
+<section class="lane">
+<div class="lanehead"><h2>ZERO → PERSONAL MCP</h2><span class="mono">CHAT IS THE SETUP UI</span></div>
+<div class="steps">
+<article class="step" data-n="1"><span class="label">01 // CONNECT</span><h3>ADD MY PHAST</h3><p>Connect the management MCP in ChatGPT, Claude, Codex, or another MCP client. Authenticate once with Teahub.</p><div class="cmd"><b>MCP</b> my.phast.app/mcp</div></article>
+<article class="step" data-n="2"><span class="label">02 // CREATE</span><h3>TELL YOUR AGENT</h3><p>No project wizard. Name it in chat. Wildcard DNS, TLS, home, and MCP are already waiting.</p><div class="cmd"><b>YOU</b> create me a phast called chai</div></article>
+<article class="step" data-n="3"><span class="label">03 // TUNE</span><h3>BUILD THE BELT</h3><p>Add providers, tools, and Prefab widgets. Your agent and your web home edit the same Phast.</p><div class="cmd"><b>YOU</b> add github + a PR widget</div></article>
+</div>
+</section>
+<section class="what">
+<div class="card"><span class="label">WHAT YOU GET</span><h3>YOURNAME.PHAST.APP</h3><p>A fast personal web home for the human side of your composition. Widgets are saved views of the same capabilities your agent can use.</p><div class="belt"><span class="pill hot">/ human home</span><span class="pill">Prefab widgets</span><span class="pill">edit by chat</span></div></div>
+<div class="card"><span class="label">TAKE IT ANYWHERE</span><h3>/MCP</h3><p>Your portable tool belt. Connect <b style="color:var(--orange)">yourname.phast.app/mcp</b> to another agent without recollecting every tool.</p><div class="belt"><span class="pill hot">ChatGPT</span><span class="pill">Claude</span><span class="pill">Codex</span><span class="pill">whatever's next</span></div></div>
+</section>
+<footer class="foot"><span><b>connect once // compose continuously</b></span><span>my.phast.app/mcp → *.phast.app/mcp</span></footer>
+</main>
+<div class="toast" id="toast">MCP COPIED</div>
+<script>
+const b=document.querySelector('#copy'),t=document.querySelector('#toast');b.onclick=async()=>{try{await navigator.clipboard.writeText('https://my.phast.app/mcp');t.textContent='MCP COPIED'}catch{t.textContent='my.phast.app/mcp'}t.classList.add('show');setTimeout(()=>t.classList.remove('show'),1200)};
+</script>
+</body></html>
\ No newline at end of file