cloudflare-tunnel-kit 0.1.5 → 0.1.6

package/README.md

@@ -6,7 +6,7 @@ An open-source toolkit for creating and integrating Cloudflare Tunnels through t
 
 ## Current version
 
-`0.1.5` is the current MVP and includes:
+`0.1.6` is the current MVP and includes:
 
 - A reusable TypeScript API for validation, plan generation, execution, and redaction.
 - The `cf-tunnel` CLI with `init`, `create`, `quick`, `start`, `stop`, `status`, `doctor`, and `ui` commands.

package/dist/cli/main.js

@@ -14,8 +14,9 @@ function interactiveRequired() { console.error('[INTERACTIVE_INPUT_REQUIRED] Thi
 async function startUi() {
     console.log('Starting Cloudflare Tunnel Kit UI on this machine...');
     const service = createTunnelKitService({ dataDir: process.env.CLOUDFLARE_TUNNEL_KIT_DATA_DIR });
-    const server = createServer({ service });
+    const server = createServer({ service, version: packageVersion });
     server.once('error', error => { console.error(`Unable to start the local UI: ${error.message}`); console.error('Run `npx cf-tunnel ui` again after checking local server permissions.'); process.exitCode = 1; service.close(); });
+    console.log(`Cloudflare Tunnel Kit v${packageVersion}`);
     server.listen(0, '127.0.0.1', async () => { const address = server.address(); if (!address || typeof address === 'string')
         return; const url = `http://127.0.0.1:${address.port}`; console.log(`UI ready at ${url}`); if (!args.includes('--no-open'))
         console.log((await launchBrowser(url)).message); });

package/dist/ui/page.d.ts

@@ -1 +1 @@
-export declare function dashboardPage(): string;
+export declare function dashboardPage(version?: string): string;

package/dist/ui/page.js

@@ -1,14 +1,14 @@
-export function dashboardPage() {
+export function dashboardPage(version = '0.1.5') {
     return String.raw `<!doctype html>
 <html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
-<title>Cloudflare Tunnel Kit</title>
+<title>Cloudflare Tunnel Kit v${escapeAttribute(version)}</title>
 <style>
 :root{color-scheme:light;--ink:#172033;--muted:#68738a;--line:#e4e8f0;--panel:#fff;--bg:#f4f6fa;--blue:#1665d8;--blue2:#0c4fad;--orange:#f48120;--green:#11845b;--red:#c93c4b;--shadow:0 18px 50px rgba(26,39,70,.10)}
 *{box-sizing:border-box}body{margin:0;font:15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}button,input,select{font:inherit}button{cursor:pointer}.shell{min-height:100vh}.topbar{height:68px;background:#101827;color:white;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,72px);box-shadow:0 1px 0 #ffffff18}.brand{display:flex;align-items:center;gap:12px;font-weight:760;letter-spacing:-.02em}.logo{width:34px;height:34px;border-radius:11px;background:linear-gradient(145deg,#ffad38,var(--orange));display:grid;place-items:center;color:white;font-size:19px;box-shadow:0 8px 24px #f4812050}.top-actions{display:flex;gap:10px}.main{max-width:1180px;margin:0 auto;padding:42px 28px 70px}.hero{display:grid;grid-template-columns:1.4fr .8fr;gap:24px;align-items:stretch}.hero-copy,.health-panel,.section{background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}.hero-copy{padding:38px;background:radial-gradient(circle at 100% 0,#eaf3ff 0,transparent 42%),#fff}.eyebrow{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}h1{font-size:clamp(30px,4vw,48px);line-height:1.05;letter-spacing:-.045em;margin:10px 0 14px}.lead{font-size:17px;color:var(--muted);max-width:650px;margin:0 0 26px}.actions{display:flex;flex-wrap:wrap;gap:12px}.btn{border:0;border-radius:11px;padding:11px 16px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn.primary{background:var(--blue);color:white;box-shadow:0 8px 18px #1665d835}.btn.primary:hover{background:var(--blue2)}.btn.secondary{background:#edf3fc;color:#174b91}.btn.ghost{background:white;color:var(--ink);border:1px solid var(--line)}.btn.danger{background:#fff0f1;color:var(--red)}.health-panel{padding:28px}.health-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.health-title h2,.section-head h2{margin:0;font-size:19px;letter-spacing:-.02em}.check{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line)}.check:first-of-type{border:0}.dot{width:10px;height:10px;border-radius:50%;margin-top:6px;background:#aab3c3}.dot.ok{background:var(--green);box-shadow:0 0 0 4px #dff5ed}.check b{display:block}.check span{color:var(--muted);font-size:13px}.section{margin-top:24px;padding:28px}.section-head{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:20px}.section-head p{margin:4px 0 0;color:var(--muted)}.projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.empty{grid-column:1/-1;border:1px dashed #cfd6e3;border-radius:16px;padding:42px;text-align:center;color:var(--muted);background:#fafbfc}.card{border:1px solid var(--line);border-radius:16px;padding:20px;background:#fff;min-width:0}.card-top{display:flex;justify-content:space-between;gap:12px}.card h3{margin:0;font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.badge{font-size:12px;font-weight:750;padding:4px 9px;border-radius:999px;background:#eef1f6;color:#536078;white-space:nowrap}.badge.running{background:#dcf6eb;color:#08734d}.badge.attention{background:#fff0d9;color:#9a5b00}.meta{margin:16px 0;color:var(--muted);font-size:13px;display:grid;gap:6px}.meta code{overflow:hidden;text-overflow:ellipsis}.card-actions{display:flex;gap:8px}.card-actions .btn{padding:8px 11px;font-size:13px}.notice{padding:12px 14px;border-radius:11px;background:#fff6e9;color:#854e00;margin:14px 0;font-size:13px}.hidden{display:none!important}
 dialog{border:0;border-radius:22px;padding:0;width:min(680px,calc(100vw - 30px));box-shadow:0 30px 100px #11182755}dialog::backdrop{background:#10182799;backdrop-filter:blur(3px)}.dialog-head{padding:24px 28px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start}.dialog-head h2{margin:0;font-size:22px}.dialog-head p{margin:5px 0 0;color:var(--muted)}.close{border:0;background:#f0f2f6;border-radius:9px;width:34px;height:34px}.dialog-body{padding:25px 28px}.steps{display:flex;gap:8px;margin-bottom:24px}.step{height:5px;flex:1;border-radius:4px;background:#e3e7ee}.step.active{background:var(--blue)}label{display:block;font-weight:700;margin:15px 0 6px}.hint{font-size:12px;color:var(--muted);margin-top:5px}input,select{width:100%;padding:11px 12px;border:1px solid #cfd6e3;border-radius:10px;background:white;color:var(--ink);outline:none}input:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 3px #1665d81a}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.dialog-foot{padding:18px 28px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px}.review{background:#f6f8fb;border-radius:13px;padding:16px}.review ul{margin:8px 0 0;padding-left:20px}.result{white-space:pre-wrap;background:#101827;color:#e7edf8;border-radius:13px;padding:16px;max-height:280px;overflow:auto;font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace}.toast{position:fixed;right:24px;bottom:24px;background:#101827;color:#fff;padding:13px 17px;border-radius:11px;box-shadow:var(--shadow);z-index:20}
 @media(max-width:850px){.hero{grid-template-columns:1fr}.projects{grid-template-columns:1fr 1fr}}@media(max-width:580px){.main{padding:24px 15px}.topbar{padding:0 16px}.top-actions .btn span{display:none}.hero-copy,.health-panel,.section{border-radius:16px}.hero-copy{padding:26px}.projects{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}.dialog-head,.dialog-body,.dialog-foot{padding-left:19px;padding-right:19px}.actions>.btn{width:100%}}
 </style></head><body><div class="shell">
-<header class="topbar"><div class="brand"><div class="logo">☁</div><span>Cloudflare Tunnel Kit</span></div><div class="top-actions"><button class="btn ghost" data-action="doctor">System check</button></div></header>
+<header class="topbar"><div class="brand"><div class="logo">☁</div><span>Cloudflare Tunnel Kit <small>v${escapeAttribute(version)}</small></span></div><div class="top-actions"><button class="btn ghost" data-action="doctor">System check</button></div></header>
 <main class="main"><section class="hero"><div class="hero-copy"><div class="eyebrow">Local tunnel manager</div><h1>Your tunnels,<br>without the guesswork.</h1><p class="lead">Expose a local project through a temporary URL or connect your own Cloudflare domain. Every change is reviewed before it runs.</p><div class="actions"><button class="btn primary" data-new="quick">⚡ Create Quick Tunnel</button><button class="btn secondary" data-new="named">◎ Use a custom domain</button></div></div><aside class="health-panel"><div class="health-title"><h2>Environment</h2><button class="btn ghost" data-action="doctor">Run checks</button></div><div id="checks"><div class="check"><i class="dot"></i><div><b>Not checked yet</b><span>Run system checks before your first tunnel.</span></div></div></div></aside></section>
 <section class="section"><div class="section-head"><div><h2>Saved projects</h2><p>Settings and history stored only on this machine.</p></div><button class="btn ghost" data-action="refresh">↻ Refresh</button></div><div class="projects" id="projects"><div class="empty">Loading your projects…</div></div></section></main></div>
 <dialog id="wizard"><div class="dialog-head"><div><h2 id="wizard-title">Create a tunnel</h2><p id="wizard-subtitle">Step-by-step setup</p></div><button class="close" data-close aria-label="Close">×</button></div><div class="dialog-body"><div class="steps"><i class="step active"></i><i class="step"></i><i class="step"></i></div>
@@ -21,13 +21,13 @@ const esc=v=>String(v??'').replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&
 async function api(url,options={}){const headers={'content-type':'application/json',...(options.headers||{})};if(token)headers['x-confirmation-token']=token;const r=await fetch(url,{...options,headers});const body=await r.json().catch(()=>({error:'Invalid server response'}));if(!r.ok)throw new Error(body.error||body.issues?.[0]?.reason||'Request failed');return body}
 function toast(message){const el=q('#toast');el.textContent=message;el.classList.remove('hidden');setTimeout(()=>el.classList.add('hidden'),3200)}
 async function load(){try{const data=await api('/api/projects');renderProjects(data.projects)}catch(e){q('#projects').innerHTML='<div class="empty">'+esc(e.message)+'</div>'}}
-function renderProjects(items){q('#projects').innerHTML=items.length?items.map(p=>'<article class="card"><div class="card-top"><h3>'+esc(p.displayName)+'</h3><span class="badge '+(p.status==='Running'?'running':p.status==='Needs attention'?'attention':'')+'">'+esc(p.status)+'</span></div><div class="meta"><span>'+esc(p.kind==='named'?p.hostname||'Custom domain':'Quick Tunnel')+'</span><code>'+esc(p.localUrl||p.path)+'</code></div><div class="card-actions">'+(p.status==='Running'?'<button class="btn ghost" data-project="'+p.id+'" data-command="stop">Stop</button>':'<button class="btn secondary" data-project="'+p.id+'" data-command="start">Start</button>')+'<button class="btn ghost" data-project="'+p.id+'" data-command="retry">Retry setup</button></div></article>').join(''):'<div class="empty"><b>No saved projects yet.</b><br>Create a Quick Tunnel or connect a custom domain to get started.</div>'}
+function renderProjects(items){q('#projects').innerHTML=items.length?items.map(p=>'<article class="card"><div class="card-top"><h3>'+esc(p.displayName)+'</h3><span class="badge '+(p.status==='Running'?'running':p.status==='Needs attention'?'attention':'')+'">'+esc(p.status)+'</span></div><div class="meta"><span>'+esc(p.kind==='named'?p.hostname||'Custom domain':'Quick Tunnel')+'</span><code>'+esc(p.localUrl||p.path)+'</code></div><div class="card-actions">'+(p.status==='Running'?'<button class="btn ghost" data-project="'+p.id+'" data-command="stop">Stop</button>':'<button class="btn secondary" data-project="'+p.id+'" data-command="start">Start</button>')+'<button class="btn ghost" data-project="'+p.id+'" data-command="retry">Retry setup</button><button class="btn danger" data-project="'+p.id+'" data-command="remove-local">Remove local</button></div></article>').join(''):'<div class="empty"><b>No saved projects yet.</b><br>Create a Quick Tunnel or connect a custom domain to get started.</div>'}
 function openWizard(nextMode){mode=nextMode;stage=0;plan=null;q('#setup-form').reset();q('[name=projectPath]').value=${JSON.stringify(process.cwd())};q('[name=localUrl]').value='http://127.0.0.1:8000';q('#named-fields').classList.toggle('hidden',mode!=='named');q('#named-notice').classList.toggle('hidden',mode!=='named');q('#wizard-title').textContent=mode==='named'?'Set up a custom domain':'Create a Quick Tunnel';q('#wizard-subtitle').textContent=mode==='named'?'Cloudflare login, tunnel, DNS, and connector':'No Cloudflare login required';showStage();q('#wizard').showModal()}
 function showStage(){q('#fields').classList.toggle('hidden',stage!==0);q('#review').classList.toggle('hidden',stage!==1);q('#running').classList.toggle('hidden',stage!==2);qa('.step').forEach((el,i)=>el.classList.toggle('active',i<=stage));q('#continue').textContent=stage===0?'Review changes':stage===1?'Confirm and run':'Done'}
 function values(){const data=Object.fromEntries(new FormData(q('#setup-form')));return {...data,profile:data.profile||'custom'}}
 async function next(){try{if(stage===0){const data=values();if(mode==='named'&&(!data.tunnelName||!data.hostname))throw new Error('Tunnel name and public hostname are required.');plan=await api('/api/plans/'+mode,{method:'POST',body:JSON.stringify(data)});q('#effects').innerHTML=plan.effects.map(x=>'<li>'+esc(x)+'</li>').join('');stage=1;showStage()}else if(stage===1){stage=2;showStage();q('#result').textContent='Running validated workflow…';const result=await api('/api/execute',{method:'POST',body:JSON.stringify({planId:plan.id,confirmations:plan.confirmations})});q('#result').textContent=JSON.stringify(result,null,2);await load()}else q('#wizard').close()}catch(e){toast(e.message)}}
 async function doctor(){try{const data=await api('/api/doctor');q('#checks').innerHTML=data.checks.map(c=>'<div class="check"><i class="dot '+(c.state==='passed'?'ok':'')+'"></i><div><b>'+esc(c.name)+'</b><span>'+esc(c.detail)+'</span></div></div>').join('')}catch(e){toast(e.message)}}
-document.addEventListener('click',async e=>{const t=e.target.closest('button');if(!t)return;if(t.dataset.new)openWizard(t.dataset.new);if(t.dataset.close)q('#wizard').close();if(t.id==='continue'){e.preventDefault();await next()}if(t.dataset.action==='refresh')await load();if(t.dataset.action==='doctor')await doctor();if(t.dataset.project){try{await api('/api/projects/'+t.dataset.project+'/'+t.dataset.command,{method:'POST',body:'{}'});await load()}catch(err){toast(err.message)}}});
+document.addEventListener('click',async e=>{const t=e.target.closest('button');if(!t)return;if(t.dataset.new)openWizard(t.dataset.new);if(t.dataset.close)q('#wizard').close();if(t.id==='continue'){e.preventDefault();await next()}if(t.dataset.action==='refresh')await load();if(t.dataset.action==='doctor')await doctor();if(t.dataset.project){if(t.dataset.command==='remove-local'&&!confirm('Remove this project from the local dashboard? Cloudflare tunnel and DNS resources will not be deleted.'))return;try{await api('/api/projects/'+t.dataset.project+'/'+t.dataset.command,{method:'POST',body:'{}'});await load()}catch(err){toast(err.message)}}});
 api('/api/session').then(x=>{token=x.confirmationToken;load();doctor()}).catch(e=>toast(e.message));
 </script></body></html>`;
 }

package/dist/ui/server.d.ts

@@ -3,4 +3,5 @@ export declare function createServer(options?: {
     service?: any;
     sessionToken?: string;
     maxBodyBytes?: number;
+    version?: string;
 }): Server;

package/dist/ui/server.js

@@ -15,7 +15,7 @@ export function createServer(options = {}) {
         secureHeaders(res);
         const url = new URL(req.url ?? '/', 'http://127.0.0.1');
         if (req.method === 'GET' && url.pathname === '/')
-            return html(res, dashboardPage());
+            return html(res, dashboardPage(options.version));
         if (req.method === 'GET' && url.pathname === '/api/session')
             return json(res, { confirmationToken: token });
         if (req.method === 'GET' && url.pathname === '/api/projects')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cloudflare-tunnel-kit",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Safe, reusable Cloudflare Tunnel setup for custom and Laravel projects.",
   "type": "module",
   "bin": {