dev.html

<!doctype html>
<html lang="th">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>Dev Workspace — lsuperagen.docs</title>
<meta name="description" content="Private owner workspace for lsuperagen.docs"/>
<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=Inter:wght@400;500;600;700;800;900&family=Noto+Sans+Thai:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
<style>
:root{--bg:#090a12;--panel:#10111c;--panel2:#151521;--line:#302c3b;--line2:#474050;--line3:#5b5162;--fg:#f5f7f9;--fg2:#a2a7b0;--fg3:#7c828c;--acc:#f4bc91;--ok:#79dda8;--warn:#f7d889;--danger:#ff7a7a;--gut:clamp(22px,5vw,46px);--sans:"Inter","Noto Sans Thai",system-ui,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;min-height:100vh;background:var(--bg);color:var(--fg);font-family:var(--sans);line-height:1.6;overflow-x:hidden}a{color:inherit;text-decoration:none}.thai,:lang(th){font-family:"Noto Sans Thai","Inter",system-ui,sans-serif}.mono{font-family:var(--mono)}.bp{position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(154,123,160,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(154,123,160,.07) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 90% 62% at 50% 0,#000 30%,transparent 100%)}.orb{position:fixed;top:-260px;right:-180px;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(233,160,119,.14),rgba(233,160,119,0) 62%);pointer-events:none}.wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding-inline:var(--gut)}.hdr{position:sticky;top:0;z-index:10;border-bottom:1px solid var(--line);background:rgba(6,6,6,.86);backdrop-filter:blur(16px)}.hdrin{min-height:72px;display:flex;align-items:center;gap:14px;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;font-size:1.18rem;font-weight:900;letter-spacing:-.04em}.brand span{color:var(--fg3);font-weight:750}.mark{width:46px;height:46px;border:1px solid var(--line3);border-radius:15px;background:linear-gradient(180deg,#151521,#0d0e18);display:grid;place-items:center;font-weight:900}.toplinks{display:flex;gap:8px;flex-wrap:wrap}.pill{border:1px solid var(--line2);border-radius:999px;padding:8px 12px;color:var(--fg2);font-weight:700;font-size:.86rem;background:rgba(10,10,11,.62)}.hero{padding:clamp(44px,8vw,92px) 0 16px}.ey{font-size:.75rem;letter-spacing:.28em;color:var(--fg3);text-transform:uppercase}.ey b{color:var(--acc)}h1{margin:14px 0 0;font-size:clamp(2.55rem,11vw,5.1rem);line-height:.98;letter-spacing:-.06em}.lede{margin:16px 0 0;max-width:800px;color:var(--fg2);font-size:clamp(1rem,3.4vw,1.22rem)}.shell{padding:18px 0 80px}.panel{border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,rgba(18,19,22,.74),rgba(7,7,8,.92));padding:clamp(20px,4vw,30px);box-shadow:0 24px 70px rgba(0,0,0,.26);margin-bottom:16px}.panel h2{margin:0 0 6px;font-size:clamp(1.55rem,5vw,2.35rem);letter-spacing:-.045em}.panel p{margin:0;color:var(--fg2)}.grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:24px}.split{display:grid;grid-template-columns:1fr 1fr;gap:12px}.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.btn{min-height:62px;border:1px solid var(--line2);border-radius:16px;background:rgba(10,10,11,.72);color:var(--fg);display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:850;font-size:1.02rem;padding:0 18px}.btn small{display:block;color:var(--fg3);font-weight:650;font-size:.75rem}.btn:hover{border-color:rgba(142,198,255,.54);background:rgba(142,198,255,.07)}.btn b{color:var(--fg3);font-size:.88rem}.badge{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;color:var(--acc);border:1px solid rgba(142,198,255,.22);background:rgba(142,198,255,.07);border-radius:999px;padding:4px 8px}.note{border-left:3px solid var(--acc);background:rgba(142,198,255,.06);border-radius:14px;padding:14px 16px;color:var(--fg2);margin-top:16px}.warn{border-left-color:var(--warn);background:rgba(247,216,137,.06)}.mcpbox{border:1px solid rgba(142,198,255,.24);border-radius:20px;background:linear-gradient(180deg,rgba(142,198,255,.07),rgba(10,10,11,.62));padding:18px;margin-top:20px}.mcphead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}.mcphead h3{margin:0;font-size:1.25rem;letter-spacing:-.035em}.field{display:grid;gap:8px;margin-top:14px}label{font-family:var(--mono);font-size:.7rem;color:var(--fg3);letter-spacing:.13em}input,textarea{width:100%;border:1px solid var(--line2);border-radius:14px;background:#0d0e18;color:var(--fg);padding:12px 13px;font:13px/1.55 var(--mono);outline:none}textarea{min-height:92px;resize:vertical}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.action{border:1px solid var(--line2);border-radius:999px;background:#0d0e18;color:var(--fg);min-height:42px;padding:0 14px;font-weight:800;cursor:pointer}.action.primary{background:#fff;color:#090a12;border-color:#fff}.status{margin-top:12px;color:var(--fg3);font-size:.86rem}.status.ok{color:#c9f2db}.code{font-family:var(--mono);background:#0d0e18;border:1px solid var(--line);border-radius:14px;padding:12px;white-space:pre-wrap;word-break:break-word;color:#dfe3e8;font-size:.82rem;margin-top:10px}.foot{position:relative;z-index:1;border-top:1px solid var(--line);padding:22px 0 42px;color:var(--fg3);font-size:.72rem;letter-spacing:.12em}@media(max-width:760px){.split,.tri{grid-template-columns:1fr}.hdrin{align-items:flex-start;flex-direction:column;padding-block:14px}.toplinks{width:100%}.pill{flex:1;text-align:center}.brand{font-size:1.55rem}.mark{width:52px;height:52px}.panel{border-radius:20px}.hero{padding-top:42px}h1{font-size:clamp(3rem,15vw,4rem)}}
</style>
<link rel="stylesheet" href="/assets/layout.css?v=1">
<link rel="stylesheet" href="/assets/theme.css?v=3"><link rel="stylesheet" href="/assets/editorial.css?v=1">
</head>
<body data-ls-dev-workspace="v2-chatgpt-zapier-mcp" class="sdk-layout sdk-standard">
<div class="bp" aria-hidden="true"></div><div class="orb" aria-hidden="true"></div>
<header class="hdr sdk-site-header"><div class="wrap hdrin sdk-frame sdk-header-row"><a class="brand" href="index.html"><img class="brand-mark" src="/logo.svg" alt="" width="22" height="22"><div>lsuperagen<span>.dev</span></div></a><nav class="toplinks" aria-label="Dev quick links"><a class="pill" href="/api/dev/status">Dev Gate</a><a class="pill" href="/auth/logout">Logout</a><a class="pill" href="/chat">Chat</a></nav></div></header>
<main>
<section class="hero"><div class="wrap sdk-frame"><h1 class="thai">Dev Workspace</h1><p class="lede thai">จัดเตรียมโค้ด การเชื่อมต่อ และคำขอแก้ไข เพื่อส่งต่องานพัฒนาอย่างเป็นขั้นตอน</p></div></section>
<section class="wrap shell" aria-label="Private dev menu">
  <div class="panel">
    <h2 class="thai">เมนูทำงาน</h2><p class="thai">เลือกสิ่งที่ต้องใช้ต่อแบบตรง ๆ</p>
    <div class="grid">
      <div class="split"><a class="btn" href="system-registry.html"><span>System Registry<small>inventory + source map</small></span><b>→</b></a><a class="btn" href="provider-connect.html"><span>Provider Connect<small>OpenAI / Claude / provider surface</small></span><b>→</b></a></div>
      <div class="split"><a class="btn" href="endpoints.html"><span>Endpoint Map<small>public + dev routes</small></span><b>→</b></a><a class="btn" href="secret-handoff.html"><span>Secret Handoff<small>safe key handoff packet</small></span><b>→</b></a></div>
      <div class="split"><a class="btn" href="dev-code-drop.html"><span>Code Drop<small>paste long code safely</small></span><b>→</b></a><a class="btn" href="/api/dev/status"><span>Dev Gate JSON<small>owner google only</small></span><b>→</b></a></div>
      <div class="split"><a class="btn" href="/api/auth/session"><span>Auth Session JSON<small>current session</small></span><b>→</b></a><a class="btn" href="/api/admin/status"><span>Admin Status JSON<small>legacy gate state</small></span><b>→</b></a></div>
    </div>
  </div>

  <div class="panel" id="chatgpt-zapier-mcp">
    <div class="mcphead"><div><span class="badge">CHATGPT ZAPIER MCP · DEV ENTRY V1</span><h2 class="thai">ChatGPT Zapier MCP</h2><p class="thai">จัดการข้อมูลอ้างอิง MCP และเตรียมบริบทสำหรับเครื่องมือที่เชื่อมต่อ</p></div></div>
    <div class="mcpbox">
      <div class="mcphead"><div><h3>Owner Config Reference</h3><p class="thai">วาง config URL เฉพาะในเครื่องนี้ได้ ตัวเว็บจะเก็บใน localStorage ของ browser เท่านั้น</p></div><span class="badge">LOCAL ONLY</span></div>
      <div class="field"><label for="mcpConfigUrl">ZAPIER MCP CONFIG URL</label><input id="mcpConfigUrl" autocomplete="off" spellcheck="false" placeholder="https://mcp.zapier.com/mcp/servers/.../config"/></div>
      <div class="actions"><button class="action primary" id="saveMcp" type="button">Save local</button><button class="action" id="openMcp" type="button">Open config</button><button class="action" id="clearMcp" type="button">Clear local</button></div>
      <div class="status" id="mcpStatus">No config URL saved in this browser.</div>
    </div>

    <div class="grid">
      <div class="split"><a class="btn" href="https://docs.zapier.com/sdk/quickstart" rel="noreferrer"><span>Zapier SDK Quickstart<small>official SDK docs</small></span><b>↗</b></a><a class="btn" href="examples.html"><span>SDK Plug Tools<small>public prototype catalog</small></span><b>→</b></a></div>
      <div class="split"><button class="btn" id="copyMcpClient" type="button"><span>Copy MCP Client Template<small>for ChatGPT / Claude / Cursor notes</small></span><b>⧉</b></button><button class="btn" id="copySecretNames" type="button"><span>Copy Cloudflare Secret Names<small>safe variable contract</small></span><b>⧉</b></button></div>
    </div>

    <div class="tri" style="margin-top:12px">
      <div class="code">Secret name:\nZAPIER_MCP_CHATGPT_CONFIG_URL</div>
      <div class="code">Runtime later:\nZAPIER_MCP_CONNECT_URL</div>
      <div class="code">Public status:\nPrototype / External MCP Bridge</div>
    </div>
    <textarea id="mcpTemplate" readonly>{
  "mcpServers": {
    "zapier-chatgpt-owner": {
      "type": "http",
      "url": "<KEEP_IN_SECRET_NOT_REPO>"
    }
  }
}</textarea>
  </div>
</section>
</main>
<footer class="foot"><div class="wrap sdk-frame">LSUPERAGEN.DEV · OWNER GOOGLE ONLY · CHATGPT ZAPIER MCP DEV ENTRY V1 · NO CONTACTS SCOPE IN V1</div></footer>
<script>
(function(){
  const key='ls_dev_chatgpt_zapier_mcp_config_url';
  const $=(id)=>document.getElementById(id);
  const input=$('mcpConfigUrl');
  const status=$('mcpStatus');
  const saved=localStorage.getItem(key)||'';
  if(saved){input.value=saved;status.textContent='Config URL saved locally in this browser only.';status.className='status ok';}
  $('saveMcp').onclick=()=>{const value=input.value.trim();if(!value){status.textContent='Paste config URL first.';status.className='status';return;} if(!/^https:\/\/mcp\.zapier\.com\/mcp\/servers\//.test(value)){status.textContent='URL pattern does not look like Zapier MCP config.';status.className='status';return;} localStorage.setItem(key,value);status.textContent='Saved locally. Not sent to server. Not committed.';status.className='status ok';};
  $('openMcp').onclick=()=>{const value=(input.value||localStorage.getItem(key)||'').trim();if(!value){status.textContent='No config URL saved.';status.className='status';return;} window.open(value,'_blank','noopener,noreferrer');};
  $('clearMcp').onclick=()=>{localStorage.removeItem(key);input.value='';status.textContent='Local config URL cleared.';status.className='status';};
  async function copy(text,msg){await navigator.clipboard.writeText(text);status.textContent=msg;status.className='status ok';}
  $('copyMcpClient').onclick=()=>copy($('mcpTemplate').value,'MCP client template copied.');
  $('copySecretNames').onclick=()=>copy('ZAPIER_MCP_CHATGPT_CONFIG_URL\nZAPIER_MCP_CONNECT_URL','Secret names copied.');
})();
</script>
</body>
</html>