${body}

`;\n}\n\napp.use(\"*\", async (c, next) => { secureHeaders(c); await initDb(); await next(); });\napp.use(\"*\", async (c, next) => {\n const path = new URL(c.req.url).pathname;\n if ([\"/admin\", \"/access\", \"/setup\", \"/repair\", \"/callback\", \"/shop/callback\", \"/mcp/callback\", \"/mcp/start\", \"/mcp-flat/callback\", \"/mcp-flat/start\"].includes(path)) return next();\n if (!(await isAdmin(c))) return c.redirect(\"/access\");\n await next();\n});\n\napp.get(\"/access\", (c) => c.html(page(\"دخول خاص\", `

مركز خاص

الجسر محمي

استخدم رابط الإدارة الخاص الذي تم إنشاؤه للمالك. لا توجد بيانات TikTok أو مفاتيح ظاهرة في هذه الصفحة.

`)));\napp.get(\"/admin\", async (c) => {\n const provided = c.req.query(\"token\") || \"\";\n const expected = Deno.env.get(\"ADMIN_TOKEN\") || \"\";\n if (!provided || !expected || (await digestHex(provided)) !== (await digestHex(expected))) return c.html(page(\"غير مصرح\", `

رابط الإدارة غير صالح

`), 403);\n await setAdminCookie(c);\n return c.redirect(\"/\");\n});\n\napp.get(\"/\", async (c) => {\n const creds = !!(await getSetting(\"tiktok_client_key\"));\n const conn = await sqlite.execute(`SELECT open_id, display_name, avatar_url, scope, access_expires_at, updated_at FROM tiktok_connections ORDER BY updated_at DESC LIMIT 1`);\n const user = conn.rows[0] as any;\n const connected = !!user;\n return c.html(page(\"TikTok 14444 Bridge\", `\n

مركز القيادة · TikTok 14444

جسر TikTok الرسمي

اتصال OAuth مجاني ومخصص. لا تُحفظ كلمة مرور TikTok هنا، ولا تظهر مفاتيح التطبيق أو رموز الوصول في المتصفح.

مفاتيح TikTok Developer

${creds ? \"تم إعدادها بأمان\" : \"بانتظار إعداد Client Key وClient Secret\"}

${creds ? \"جاهز\" : \"مطلوب\"}

حساب TikTok

${connected ? `متصل${user.display_name ? ` باسم ${user.display_name}` : \"\"}` : \"لم يكتمل تفويض OAuth بعد\"}

${connected ? \"متصل\" : \"غير متصل\"}

${connected ? `

الصلاحيات${user.scope || \"—\"}

آخر تحديث${new Date(Number(user.updated_at)).toLocaleString(\"ar-SA\")}

` : \"\"}

Redirect URI المطلوب تسجيله في TikTok Developer

${CALLBACK}

يجب أن يطابق هذا الرابط حرفيًا داخل Login Kit في TikTok for Developers.

${creds ? `${connected ? \"إعادة تفويض TikTok\" : \"ربط حساب TikTok\"}` : `الربط ينتظر مفاتيح المطور`}حالة تقنية

\n `));\n});\n\napp.get(\"/setup\", async (c) => {\n const provided = c.req.query(\"token\") || \"\";\n const expected = Deno.env.get(\"SETUP_TOKEN\") || \"\";\n const setupDone = (await getSetting(\"setup_complete\")) === \"1\";\n if (!provided || !expected || (await digestHex(provided)) !== (await digestHex(expected))) return c.html(page(\"غير مصرح\", `

رابط الإعداد غير صالح

استخدم رابط الإعداد الآمن الذي تم إنشاؤه للمشروع.

`), 403);\n if (setupDone) return c.html(page(\"تم الإعداد\", `

آمن

تم حفظ مفاتيح TikTok بالفعل

رابط الإعداد أصبح غير قابل لإعادة كتابة المفاتيح. ارجع إلى مركز القيادة وابدأ التفويض.

مركز القيادة ربط TikTok

`));\n return c.html(page(\"إعداد TikTok Developer\", `\n

إعداد لمرة واحدة

أدخل مفاتيح TikTok Developer

هذه القيم تُرسل مباشرة إلى الخادم وتُشفّر قبل التخزين. لا ترسلها في المحادثة.

\n \n

سجّل هذا Redirect URI أولًا في Login Kit

${CALLBACK}

\n `));\n});\n\napp.post(\"/setup\", async (c) => {\n const form = await c.req.parseBody();\n const provided = String(form.token || \"\");\n const expected = Deno.env.get(\"SETUP_TOKEN\") || \"\";\n if (!provided || !expected || (await digestHex(provided)) !== (await digestHex(expected))) return c.text(\"Forbidden\", 403);\n if ((await getSetting(\"setup_complete\")) === \"1\") return c.text(\"Setup is already locked\", 409);\n const clientKey = String(form.client_key || \"\").trim();\n const clientSecret = String(form.client_secret || \"\").trim();\n if (clientKey.length < 6 || clientSecret.length < 8) return c.text(\"Invalid TikTok Developer credentials\", 400);\n await setSetting(\"tiktok_client_key\", clientKey);\n await setSetting(\"tiktok_client_secret_enc\", await encrypt(clientSecret));\n await setSetting(\"setup_complete\", \"1\");\n await setAdminCookie(c);\n return c.redirect(\"/\");\n});\n\napp.get(\"/repair\", async (c) => {\n const provided = c.req.query(\"token\") || \"\";\n const expected = Deno.env.get(\"REPAIR_TOKEN\") || \"\";\n const used = (await getSetting(\"repair_used\")) === \"1\";\n if (!provided || !expected || (await digestHex(provided)) !== (await digestHex(expected))) return c.html(page(\"غير مصرح\", `

رابط الإصلاح غير صالح

استخدم رابط الإصلاح الخاص الذي تم إنشاؤه لهذا العطل.

`), 403);\n if (used) return c.html(page(\"تم الإصلاح\", `

مغلق بأمان

استُخدم رابط الإصلاح بالفعل

تم تحديث مفاتيح TikTok Developer وإغلاق النموذج ضد إعادة الاستخدام.

`));\n return c.html(page(\"إصلاح TikTok Developer\", `\n

إصلاح لمرة واحدة

صحّح Client Key وClient Secret

خذ القيمتين فقط من TikTok for Developers → Manage apps → تطبيقك → Basic information → Credentials. لا تستخدم App ID ولا رقم الهاتف ولا اسم المستخدم.

قبل الحفظ تأكد من شيئين1) أضف منتج Login Kit إلى التطبيق. 2) سجّل Redirect URI التالي حرفيًا داخل إعدادات Login Kit.

${CALLBACK}

\n \n `));\n});\n\napp.post(\"/repair\", async (c) => {\n const form = await c.req.parseBody();\n const provided = String(form.token || \"\");\n const expected = Deno.env.get(\"REPAIR_TOKEN\") || \"\";\n if (!provided || !expected || (await digestHex(provided)) !== (await digestHex(expected))) return c.text(\"Forbidden\", 403);\n if ((await getSetting(\"repair_used\")) === \"1\") return c.text(\"Repair token already used\", 409);\n const clientKey = String(form.client_key || \"\").trim();\n const clientSecret = String(form.client_secret || \"\").trim();\n if (clientKey.length < 6 || clientSecret.length < 8) return c.text(\"Invalid TikTok Developer credentials\", 400);\n await setSetting(\"tiktok_client_key\", clientKey);\n await setSetting(\"tiktok_client_secret_enc\", await encrypt(clientSecret));\n await setSetting(\"repair_used\", \"1\");\n await sqlite.execute(`DELETE FROM oauth_states`);\n await setAdminCookie(c);\n return c.redirect(\"/connect\");\n});\n\napp.get(\"/connect\", async (c) => {\n const creds = await getCredentials();\n if (!creds) return c.html(page(\"الإعداد ناقص\", `

مفاتيح TikTok Developer غير موجودة

أكمل الإعداد الآمن أولًا.

العودة`), 412);\n const state = b64(crypto.getRandomValues(new Uint8Array(32)));\n const stateHash = await digestHex(state);\n await sqlite.execute({ sql: `DELETE FROM oauth_states WHERE expires_at < ?`, args: [Date.now()] });\n await sqlite.execute({ sql: `INSERT INTO oauth_states(state_hash,expires_at) VALUES(?,?)`, args: [stateHash, Date.now() + 10 * 60 * 1000] });\n const u = new URL(\"https://www.tiktok.com/v2/auth/authorize/\");\n u.searchParams.set(\"client_key\", creds.clientKey);\n u.searchParams.set(\"response_type\", \"code\");\n u.searchParams.set(\"scope\", \"user.info.basic\");\n u.searchParams.set(\"redirect_uri\", CALLBACK);\n u.searchParams.set(\"state\", state);\n return c.redirect(u.toString());\n});\n\napp.get(\"/callback\", async (c) => {\n const error = c.req.query(\"error\");\n if (error) return c.html(page(\"تعذر الربط\", `

TikTok

لم يكتمل التفويض

${c.req.query(\"error_description\") || error}

العودة`), 400);\n const code = c.req.query(\"code\") || \"\";\n const state = c.req.query(\"state\") || \"\";\n if (!code || !state) return c.text(\"Missing OAuth parameters\", 400);\n const stateHash = await digestHex(state);\n const sr = await sqlite.execute({ sql: `SELECT state_hash,expires_at FROM oauth_states WHERE state_hash=? LIMIT 1`, args: [stateHash] });\n const saved = sr.rows[0] as any;\n if (!saved || Number(saved.expires_at) < Date.now()) return c.text(\"OAuth state invalid or expired\", 400);\n await sqlite.execute({ sql: `DELETE FROM oauth_states WHERE state_hash=?`, args: [stateHash] });\n const creds = await getCredentials();\n if (!creds) return c.text(\"Developer credentials missing\", 500);\n const form = new URLSearchParams({ client_key: creds.clientKey, client_secret: creds.clientSecret, code, grant_type: \"authorization_code\", redirect_uri: CALLBACK });\n const tokenRes = await fetch(\"https://open.tiktokapis.com/v2/oauth/token/\", { method: \"POST\", headers: { \"Content-Type\": \"application/x-www-form-urlencoded\", \"Cache-Control\": \"no-cache\" }, body: form });\n const token = await tokenRes.json();\n if (!tokenRes.ok || !token.access_token || !token.refresh_token || !token.open_id) return c.html(page(\"فشل الرمز\", `

تعذر إكمال الربط

${token.error_description || token.error || \"TikTok token exchange failed\"}

العودة`), 502);\n let displayName: string | null = null, avatarUrl: string | null = null;\n try {\n const ur = await fetch(\"https://open.tiktokapis.com/v2/user/info/?fields=open_id,union_id,avatar_url,display_name\", { headers: { Authorization: `Bearer ${token.access_token}` } });\n const uj = await ur.json();\n displayName = uj?.data?.user?.display_name ?? null;\n avatarUrl = uj?.data?.user?.avatar_url ?? null;\n } catch (_) {}\n const now = Date.now();\n await sqlite.execute({ sql: `INSERT INTO tiktok_connections(open_id,access_token_enc,refresh_token_enc,scope,access_expires_at,refresh_expires_at,display_name,avatar_url,connected_at,updated_at) VALUES(?,?,?,?,?,?,?,?,?,?) ON CONFLICT(open_id) DO UPDATE SET access_token_enc=excluded.access_token_enc,refresh_token_enc=excluded.refresh_token_enc,scope=excluded.scope,access_expires_at=excluded.access_expires_at,refresh_expires_at=excluded.refresh_expires_at,display_name=excluded.display_name,avatar_url=excluded.avatar_url,updated_at=excluded.updated_at`, args: [token.open_id, await encrypt(token.access_token), await encrypt(token.refresh_token), token.scope || c.req.query(\"scopes\") || \"\", now + Number(token.expires_in || 0) * 1000, now + Number(token.refresh_expires_in || 0) * 1000, displayName, avatarUrl, now, now] });\n return c.html(page(\"تم الربط\", `

نجاح

تم ربط TikTok فعليًا ✓

تم استلام رموز OAuth من TikTok وتشفيرها على الخادم. ${displayName ? `الحساب المتصل: ${displayName}.` : \"\"}

مركز القيادة

`));\n});\n\nfunction parseMcpBody(text:string){\n const direct=(()=>{try{return JSON.parse(text)}catch{return null}})();\n if(direct) return direct;\n const lines=text.split(/\\r?\\n/).filter(x=>x.startsWith(\"data:\"));\n for(let i=lines.length-1;i>=0;i--){try{return JSON.parse(lines[i].slice(5).trim())}catch{}}\n return {raw:text.slice(0,2000)};\n}\nasync function mcpRpc(token:string, body:any, sessionId?:string){\n const headers:any={Authorization:`Bearer ${token}`,Accept:\"application/json, text/event-stream\",\"Content-Type\":\"application/json\",\"MCP-Protocol-Version\":\"2025-06-18\"};\n if(sessionId) headers[\"Mcp-Session-Id\"]=sessionId;\n const r=await fetch(MCP_RESOURCE,{method:\"POST\",headers,body:JSON.stringify(body)});\n const text=await r.text();\n return {ok:r.ok,status:r.status,sessionId:r.headers.get(\"mcp-session-id\")||sessionId||null,data:parseMcpBody(text)};\n}\n\nasync function mcpAuthorizeUrl(){\n const clientId=await getSetting(\"tt4b_mcp_client_id\");\n if(!clientId) return null;\n const state=b64(crypto.getRandomValues(new Uint8Array(32)));\n const verifier=b64(crypto.getRandomValues(new Uint8Array(64)));\n const challenge=await pkceChallenge(verifier);\n const hash=await digestHex(state);\n await sqlite.execute({sql:`DELETE FROM mcp_oauth_states WHERE expires_at < ?`,args:[Date.now()]});\n await sqlite.execute({sql:`INSERT INTO mcp_oauth_states(state_hash,verifier_enc,expires_at) VALUES(?,?,?)`,args:[hash,await encrypt(verifier),Date.now()+10*60*1000]});\n const u=new URL(MCP_AUTH);\n u.searchParams.set(\"client_id\",clientId);\n u.searchParams.set(\"response_type\",\"code\");\n u.searchParams.set(\"redirect_uri\",MCP_CALLBACK);\n u.searchParams.set(\"scope\",\"mcp:tt4b\");\n u.searchParams.set(\"state\",state);\n u.searchParams.set(\"code_challenge\",challenge);\n u.searchParams.set(\"code_challenge_method\",\"S256\");\n u.searchParams.set(\"resource\",MCP_RESOURCE);\n return u.toString();\n}\n\napp.get(\"/mcp/start\", async (c) => {\n const provided=c.req.query(\"token\")||\"\";\n const expected=Deno.env.get(\"MCP_START_TOKEN\")||\"\";\n if((await getSetting(\"mcp_start_disabled\"))===\"1\") return c.html(page(\"TikTok MCP\", `

آمن

تم استخدام رابط الربط وإغلاقه

الاتصال الناجح يعطّل رابط البدء تلقائيًا.

`),410);\n if(!provided||!expected||(await digestHex(provided))!==(await digestHex(expected))) return c.html(page(\"غير مصرح\", `

رابط TikTok MCP غير صالح

`),403);\n const target=await mcpAuthorizeUrl();\n if(!target) return c.html(page(\"TikTok MCP\", `

تعذر بدء الاتصال

Dynamic Client Registration غير مكتمل.

`),412);\n await setAdminCookie(c);\n return c.redirect(target);\n});\n\napp.get(\"/mcp/connect\", async (c) => {\n const target=await mcpAuthorizeUrl();\n if(!target) return c.html(page(\"TikTok MCP\", `

MCP Client غير مسجل

الجسر ينتظر Dynamic Client Registration.

`),412);\n return c.redirect(target);\n});\n\napp.get(\"/mcp/callback\", async (c) => {\n const error=c.req.query(\"error\");\n if(error) return c.html(page(\"TikTok MCP\", `

TikTok for Business

لم يكتمل تفويض MCP

${c.req.query(\"error_description\")||error}

`),400);\n const code=c.req.query(\"code\")||\"\",state=c.req.query(\"state\")||\"\";\n if(!code||!state) return c.text(\"Missing MCP OAuth parameters\",400);\n const hash=await digestHex(state);\n const sr=await sqlite.execute({sql:`SELECT verifier_enc,expires_at FROM mcp_oauth_states WHERE state_hash=? LIMIT 1`,args:[hash]});\n const saved=sr.rows[0] as any;\n if(!saved||Number(saved.expires_at)({}));\n if(!tr.ok||!t.access_token) return c.html(page(\"TikTok MCP\", `

تعذر إصدار MCP Token

${t.error_description||t.error||`HTTP ${tr.status}`}

`),502);\n const now=Date.now();\n await sqlite.execute({sql:`INSERT INTO tt4b_mcp_connections(id,access_token_enc,refresh_token_enc,scope,token_type,expires_at,connected_at,updated_at) VALUES(1,?,?,?,?,?,?,?) ON CONFLICT(id) DO UPDATE SET access_token_enc=excluded.access_token_enc,refresh_token_enc=excluded.refresh_token_enc,scope=excluded.scope,token_type=excluded.token_type,expires_at=excluded.expires_at,updated_at=excluded.updated_at`,args:[await encrypt(String(t.access_token)),t.refresh_token?await encrypt(String(t.refresh_token)):null,String(t.scope||\"mcp:tt4b\"),String(t.token_type||\"Bearer\"),t.expires_in?now+Number(t.expires_in)*1000:null,now,now]});\n await setSetting(\"mcp_start_disabled\",\"1\");\n const probe=await mcpRpc(String(t.access_token),{jsonrpc:\"2.0\",id:1,method:\"initialize\",params:{protocolVersion:\"2025-06-18\",capabilities:{},clientInfo:{name:\"AI1000 TikTok Bridge\",version:\"1.0.0\"}}});\n let discovered=0;\n if(probe.ok){\n await mcpRpc(String(t.access_token),{jsonrpc:\"2.0\",method:\"notifications/initialized\",params:{}},probe.sessionId||undefined);\n const list=await mcpRpc(String(t.access_token),{jsonrpc:\"2.0\",id:2,method:\"tools/list\",params:{}},probe.sessionId||undefined);\n const tools=(list.data as any)?.result?.tools||[];\n if(Array.isArray(tools)){\n discovered=tools.length;\n const catalog=tools.map((x:any)=>({name:x.name,description:String(x.description||\"\").slice(0,500)}));\n await setSetting(\"tt4b_mcp_tool_catalog\",JSON.stringify(catalog));\n await setSetting(\"tt4b_mcp_tool_count\",String(discovered));\n }\n }\n await setAdminCookie(c);\n return c.html(page(\"TikTok MCP\", `

نجاح

تم ربط TikTok for Business MCP ✓

تم إصدار OAuth token وتخزينه مشفرًا، ثم تشغيل الاكتشاف الآلي. الأدوات المكتشفة: ${discovered}.

فحص الاتصال مركز القيادة

`));\n});\n\napp.get(\"/mcp/probe\", async (c) => {\n const r=await sqlite.execute(`SELECT access_token_enc FROM tt4b_mcp_connections WHERE id=1 LIMIT 1`);\n const row=r.rows[0] as any;\n if(!row) return c.html(page(\"TikTok MCP\", `

MCP غير مفوض بعد

تم تسجيل الجسر رسميًا لدى خادم TikTok، لكن OAuth لم يكتمل.

بدء التفويض`),412);\n const token=await decrypt(row.access_token_enc);\n const init=await mcpRpc(token,{jsonrpc:\"2.0\",id:1,method:\"initialize\",params:{protocolVersion:\"2025-06-18\",capabilities:{},clientInfo:{name:\"AI1000 TikTok Bridge\",version:\"1.0.0\"}}});\n if(!init.ok) return c.json({ok:false,stage:\"initialize\",status:init.status,response:init.data},{status:502});\n const list=await mcpRpc(token,{jsonrpc:\"2.0\",id:2,method:\"tools/list\",params:{}},init.sessionId||undefined);\n const tools=(list.data as any)?.result?.tools||[];\n return c.json({ok:list.ok,protocol:init.data,session_id_present:!!init.sessionId,tool_count:Array.isArray(tools)?tools.length:null,tool_names:Array.isArray(tools)?tools.slice(0,100).map((x:any)=>x.name):[],raw:list.ok?undefined:list.data});\n});\n\nasync function mcpFlatAuthorizeUrl(){\n const clientId=await getSetting(\"tt4b_mcp_flat_client_id\");\n if(!clientId) return null;\n const state=b64(crypto.getRandomValues(new Uint8Array(32)));\n const verifier=b64(crypto.getRandomValues(new Uint8Array(64)));\n const challenge=await pkceChallenge(verifier);\n const hash=await digestHex(state);\n await sqlite.execute({sql:`DELETE FROM mcp_flat_oauth_states WHERE expires_at < ?`,args:[Date.now()]});\n await sqlite.execute({sql:`INSERT INTO mcp_flat_oauth_states(state_hash,verifier_enc,expires_at) VALUES(?,?,?)`,args:[hash,await encrypt(verifier),Date.now()+10*60*1000]});\n const u=new URL(MCP_AUTH);\n u.searchParams.set(\"client_id\",clientId);u.searchParams.set(\"response_type\",\"code\");u.searchParams.set(\"redirect_uri\",MCP_FLAT_CALLBACK);u.searchParams.set(\"scope\",\"mcp:tt4b\");u.searchParams.set(\"state\",state);u.searchParams.set(\"code_challenge\",challenge);u.searchParams.set(\"code_challenge_method\",\"S256\");u.searchParams.set(\"resource\",MCP_FLAT_RESOURCE);\n return u.toString();\n}\napp.get(\"/mcp-flat/start\",async(c)=>{const provided=c.req.query(\"token\")||\"\",expected=Deno.env.get(\"MCP_START_TOKEN\")||\"\";if(!provided||!expected||(await digestHex(provided))!==(await digestHex(expected)))return c.text(\"Forbidden\",403);const target=await mcpFlatAuthorizeUrl();if(!target)return c.text(\"Flat MCP registration missing\",412);await setAdminCookie(c);return c.redirect(target);});\napp.get(\"/mcp-flat/callback\",async(c)=>{\n const code=c.req.query(\"code\")||\"\",state=c.req.query(\"state\")||\"\";if(!code||!state)return c.text(\"Missing flat MCP OAuth parameters\",400);\n const hash=await digestHex(state),sr=await sqlite.execute({sql:`SELECT verifier_enc,expires_at FROM mcp_flat_oauth_states WHERE state_hash=? LIMIT 1`,args:[hash]}),saved=sr.rows[0] as any;if(!saved||Number(saved.expires_at)({}));if(!tr.ok||!t.access_token)return c.html(page(\"TikTok MCP Full\",`

تعذر إصدار Full MCP Token

${t.error_description||t.error||`HTTP ${tr.status}`}

`),502);\n const now=Date.now();await sqlite.execute({sql:`INSERT INTO tt4b_mcp_flat_connections(id,access_token_enc,refresh_token_enc,scope,token_type,expires_at,connected_at,updated_at) VALUES(1,?,?,?,?,?,?,?) ON CONFLICT(id) DO UPDATE SET access_token_enc=excluded.access_token_enc,refresh_token_enc=excluded.refresh_token_enc,scope=excluded.scope,token_type=excluded.token_type,expires_at=excluded.expires_at,updated_at=excluded.updated_at`,args:[await encrypt(String(t.access_token)),t.refresh_token?await encrypt(String(t.refresh_token)):null,String(t.scope||\"mcp:tt4b\"),String(t.token_type||\"Bearer\"),t.expires_in?now+Number(t.expires_in)*1000:null,now,now]});await setAdminCookie(c);return c.html(page(\"TikTok MCP Full\",`

نجاح

تم ربط Full MCP الاحتياطي ✓

`));\n});\n\napp.get(\"/shop/connect\", async (c) => {\n const creds = await getShopCredentials();\n if (!creds) return c.html(page(\"TikTok Shop\", `

TikTok Shop Creator

الجسر جاهز وينتظر App Key

تم تجهيز مسار Creator OAuth الرسمي. تفعيل هذا المسار يتطلب تطبيقًا في TikTok Shop Partner Center مع Creator API scopes معتمدة.

Redirect URL للتطبيق

${ORIGIN}/shop/callback

لن يتم استخدام كلمة مرور TikTok أو بيانات دفع داخل الجسر.

`), 412);\n const state = b64(crypto.getRandomValues(new Uint8Array(32)));\n const stateHash = await digestHex(`shop:${state}`);\n await sqlite.execute({ sql: `DELETE FROM oauth_states WHERE expires_at < ?`, args: [Date.now()] });\n await sqlite.execute({ sql: `INSERT INTO oauth_states(state_hash,expires_at) VALUES(?,?)`, args: [stateHash, Date.now() + 10 * 60 * 1000] });\n const u = new URL(\"https://shop.tiktok.com/alliance/creator/auth\");\n u.searchParams.set(\"app_key\", creds.appKey);\n u.searchParams.set(\"state\", state);\n return c.redirect(u.toString());\n});\n\napp.get(\"/shop/callback\", async (c) => {\n const code = c.req.query(\"code\") || \"\";\n const state = c.req.query(\"state\") || \"\";\n if (!code || code === \"null\" || !state) return c.html(page(\"TikTok Shop\", `

لم يكتمل تفويض TikTok Shop

${c.req.query(\"error\") || \"لم يصل رمز تفويض صالح.\"}

`), 400);\n const stateHash = await digestHex(`shop:${state}`);\n const sr = await sqlite.execute({ sql: `SELECT state_hash,expires_at FROM oauth_states WHERE state_hash=? LIMIT 1`, args: [stateHash] });\n const saved = sr.rows[0] as any;\n if (!saved || Number(saved.expires_at) < Date.now()) return c.text(\"TikTok Shop OAuth state invalid or expired\", 400);\n await sqlite.execute({ sql: `DELETE FROM oauth_states WHERE state_hash=?`, args: [stateHash] });\n const creds = await getShopCredentials();\n if (!creds) return c.text(\"TikTok Shop developer credentials missing\", 500);\n const tokenUrl = new URL(\"https://auth.tiktok-shops.com/api/v2/token/get\");\n tokenUrl.searchParams.set(\"app_key\", creds.appKey);\n tokenUrl.searchParams.set(\"app_secret\", creds.appSecret);\n tokenUrl.searchParams.set(\"auth_code\", code);\n tokenUrl.searchParams.set(\"grant_type\", \"authorized_code\");\n const tr = await fetch(tokenUrl.toString());\n const tj:any = await tr.json();\n const data = tj?.data || tj;\n if (!tr.ok || tj?.code !== 0 || !data?.access_token || !data?.refresh_token || !data?.open_id) return c.html(page(\"TikTok Shop\", `

تعذر إصدار Creator Token

${tj?.message || tj?.msg || \"TikTok Shop token exchange failed\"}

`), 502);\n if (data.user_type !== undefined && Number(data.user_type) !== 1) return c.html(page(\"TikTok Shop\", `

نوع التفويض غير مناسب

تم إيقاف التخزين لأن الرمز المستلم ليس Creator token.

`), 409);\n const scopes = Array.isArray(data.granted_scopes) ? data.granted_scopes.join(\",\") : String(data.granted_scopes || \"\");\n const now = Date.now();\n const aexp = data.access_token_expire_in ? Number(data.access_token_expire_in) * 1000 : null;\n const rexp = data.refresh_token_expire_in ? Number(data.refresh_token_expire_in) * 1000 : null;\n await sqlite.execute({ sql: `INSERT INTO shop_creator_connections(open_id,access_token_enc,refresh_token_enc,granted_scopes,access_expires_at,refresh_expires_at,connected_at,updated_at) VALUES(?,?,?,?,?,?,?,?) ON CONFLICT(open_id) DO UPDATE SET access_token_enc=excluded.access_token_enc,refresh_token_enc=excluded.refresh_token_enc,granted_scopes=excluded.granted_scopes,access_expires_at=excluded.access_expires_at,refresh_expires_at=excluded.refresh_expires_at,updated_at=excluded.updated_at`, args: [String(data.open_id), await encrypt(String(data.access_token)), await encrypt(String(data.refresh_token)), scopes, aexp, rexp, now, now] });\n return c.html(page(\"TikTok Shop\", `

نجاح

تم ربط TikTok Shop Creator ✓

تم تخزين Creator token مشفرًا وفصله عن TikTok Login Kit token.

`));\n});\n\napp.get(\"/api/status\", async (c) => {\n const coreCreds = !!(await getSetting(\"tiktok_client_key\"));\n const shopCreds = !!(await getSetting(\"shop_app_key\"));\n const mcpClient = !!(await getSetting(\"tt4b_mcp_client_id\"));\n const mcpFlatClient = !!(await getSetting(\"tt4b_mcp_flat_client_id\"));\n const r = await sqlite.execute(`SELECT open_id,display_name,scope,access_expires_at,refresh_expires_at,updated_at FROM tiktok_connections ORDER BY updated_at DESC LIMIT 1`);\n const s = await sqlite.execute(`SELECT open_id,granted_scopes,access_expires_at,refresh_expires_at,updated_at FROM shop_creator_connections ORDER BY updated_at DESC LIMIT 1`);\n const m = await sqlite.execute(`SELECT scope,token_type,expires_at,updated_at FROM tt4b_mcp_connections WHERE id=1 LIMIT 1`);\n const mf = await sqlite.execute(`SELECT scope,token_type,expires_at,updated_at FROM tt4b_mcp_flat_connections WHERE id=1 LIMIT 1`);\n const q = await sqlite.execute(`SELECT status,COUNT(*) AS n FROM content_queue GROUP BY status`);\n const row = r.rows[0] as any;\n const shop = s.rows[0] as any;\n const mcp = m.rows[0] as any;\n const mcpFlat = mf.rows[0] as any;\n return c.json({\n ok: true,\n tt4b_mcp: { dynamically_registered: mcpClient, connected: !!mcp, resource: MCP_RESOURCE, connection: mcp ? { scopes:mcp.scope, token_type:mcp.token_type, expires_at:mcp.expires_at?new Date(Number(mcp.expires_at)).toISOString():null, updated_at:new Date(Number(mcp.updated_at)).toISOString() } : null },\n tt4b_mcp_full: { dynamically_registered: mcpFlatClient, connected: !!mcpFlat, resource: MCP_FLAT_RESOURCE, connection: mcpFlat ? { scopes:mcpFlat.scope, token_type:mcpFlat.token_type, expires_at:mcpFlat.expires_at?new Date(Number(mcpFlat.expires_at)).toISOString():null, updated_at:new Date(Number(mcpFlat.updated_at)).toISOString() } : null },\n core: { credentials_configured: coreCreds, connected: !!row, redirect_uri: CALLBACK, connection: row ? { open_id: row.open_id, display_name: row.display_name, scopes: row.scope, access_expires_at: new Date(Number(row.access_expires_at)).toISOString(), refresh_expires_at: new Date(Number(row.refresh_expires_at)).toISOString(), updated_at: new Date(Number(row.updated_at)).toISOString() } : null },\n shop_creator: { credentials_configured: shopCreds, connected: !!shop, connection: shop ? { open_id: shop.open_id, granted_scopes: shop.granted_scopes, updated_at: new Date(Number(shop.updated_at)).toISOString() } : null },\n queue: Object.fromEntries((q.rows as any[]).map((x:any)=>[x.status,Number(x.n)])),\n capabilities: { tt4b_mcp:!!mcp, tt4b_mcp_full:!!mcpFlat, profile_read: !!row, video_list: !!row && String(row.scope||'').includes('video.list'), direct_post: !!row && String(row.scope||'').includes('video.publish'), shop_creator_api: !!shop }\n });\n});\n\napp.onError((err, c) => { console.error(err); secureHeaders(c); return c.html(page(\"خطأ\", `

عطل تقني

تعذر تنفيذ الطلب

تم إيقاف العملية بأمان. لا توجد كلمة مرور TikTok مخزنة في الجسر.

العودة`), 500); });\n\nexport default app.fetch;\n","fileType","http",30,"parentId",["D",1787172910300],"branchVersion",40,"label",[19],{"_36":123,"_13":124,"_63":125,"_70":-5,"_61":62,"_72":111,"_86":87,"_38":126,"_17":34,"_67":127,"_65":-5,"_92":51,"_74":-5,"_93":128,"_18":129},{"_36":116,"_13":117,"_63":118,"_70":-5,"_61":62,"_72":111,"_86":87,"_38":119,"_17":34,"_67":24,"_65":120,"_92":51,"_74":-5,"_93":121,"_18":122},{"_36":108,"_13":109,"_63":110,"_70":-5,"_61":62,"_72":111,"_86":87,"_38":112,"_17":34,"_67":24,"_65":113,"_92":51,"_74":-5,"_93":114,"_18":115},{"_36":60,"_13":19,"_63":64,"_70":-5,"_61":62,"_72":73,"_86":87,"_38":105,"_17":69,"_67":68,"_65":66,"_92":51,"_74":14,"_93":106,"_18":107},{"_36":96,"_13":97,"_63":98,"_70":-5,"_61":62,"_72":99,"_86":87,"_38":100,"_17":101,"_67":90,"_65":102,"_92":51,"_74":-5,"_93":103,"_18":104},{"_36":82,"_13":83,"_63":84,"_70":-5,"_61":62,"_72":85,"_86":87,"_38":88,"_17":89,"_67":90,"_65":91,"_92":51,"_74":-5,"_93":94,"_18":95},"ee3999ec-b66e-4a1f-b058-7bd3de481684","refresh.ts","f1262c6a-9c08-11f1-bd2a-1607ee4eb77e",37,"latest",true,["D",1787172721427],5,"interval","import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nconst te = new TextEncoder();\nconst td = new TextDecoder();\nfunction unb64(s: string) { s=s.replaceAll(\"-\",\"+\").replaceAll(\"_\",\"/\"); while(s.length%4)s+=\"=\"; const raw=atob(s); return Uint8Array.from(raw,c=>c.charCodeAt(0)); }\nfunction b64(bytes: Uint8Array){let s=\"\";for(const b of bytes)s+=String.fromCharCode(b);return btoa(s).replaceAll(\"+\",\"-\").replaceAll(\"/\",\"_\").replaceAll(\"=\",\"\");}\nasync function key(){const m=Deno.env.get(\"APP_MASTER_KEY\");if(!m)throw new Error(\"APP_MASTER_KEY missing\");const raw=await crypto.subtle.digest(\"SHA-256\",te.encode(m));return crypto.subtle.importKey(\"raw\",raw,\"AES-GCM\",false,[\"encrypt\",\"decrypt\"]);}\nasync function dec(v:string){const [i,b]=v.split(\".\");const out=await crypto.subtle.decrypt({name:\"AES-GCM\",iv:unb64(i)},await key(),unb64(b));return td.decode(out);}\nasync function enc(v:string){const iv=crypto.getRandomValues(new Uint8Array(12));const out=new Uint8Array(await crypto.subtle.encrypt({name:\"AES-GCM\",iv},await key(),te.encode(v)));return `${b64(iv)}.${b64(out)}`;}\nasync function setting(k:string){const r=await sqlite.execute({sql:`SELECT value FROM settings WHERE key=? LIMIT 1`,args:[k]});return (r.rows[0] as any)?.value as string|undefined;}\n\nasync function refreshCore(){\n const r=await sqlite.execute(`SELECT open_id,refresh_token_enc,access_expires_at FROM tiktok_connections ORDER BY updated_at DESC LIMIT 1`);\n const row=r.rows[0] as any;\n if(!row) return \"core:no-connection\";\n if(Number(row.access_expires_at)>Date.now()+4*60*60*1000) return \"core:healthy\";\n const clientKey=await setting(\"tiktok_client_key\"), secretEnc=await setting(\"tiktok_client_secret_enc\");\n if(!clientKey||!secretEnc) return \"core:no-credentials\";\n const body=new URLSearchParams({client_key:clientKey,client_secret:await dec(secretEnc),grant_type:\"refresh_token\",refresh_token:await dec(row.refresh_token_enc)});\n const res=await fetch(\"https://open.tiktokapis.com/v2/oauth/token/\",{method:\"POST\",headers:{\"Content-Type\":\"application/x-www-form-urlencoded\",\"Cache-Control\":\"no-cache\"},body});\n const t:any=await res.json();\n if(!res.ok||!t.access_token||!t.refresh_token) throw new Error(`core:${t.error_description||t.error||\"refresh failed\"}`);\n const now=Date.now();\n await sqlite.execute({sql:`UPDATE tiktok_connections SET access_token_enc=?,refresh_token_enc=?,scope=?,access_expires_at=?,refresh_expires_at=?,updated_at=? WHERE open_id=?`,args:[await enc(t.access_token),await enc(t.refresh_token),t.scope||\"\",now+Number(t.expires_in||0)*1000,now+Number(t.refresh_expires_in||0)*1000,now,row.open_id]});\n return \"core:renewed\";\n}\n\nconst MCP_RESOURCE=\"https://business-api.tiktok.com/open_mcp/tt-ads-mcp-layer\";\nconst MCP_TOKEN=\"https://business-api.tiktok.com/open_mcp/tt-ads-mcp-layer/oauth/token\";\nconst MCP_FLAT_RESOURCE=\"https://business-api.tiktok.com/open_mcp/tt-ads-mcp-flat\";\nconst MCP_FLAT_TOKEN=\"https://business-api.tiktok.com/open_mcp/tt-ads-mcp-flat/oauth/token\";\n\nasync function refreshMcpTable(table:string,clientKey:string,resource:string,tokenEndpoint:string,label:string){\n const r=await sqlite.execute(`SELECT access_token_enc,refresh_token_enc,expires_at FROM ${table} WHERE id=1 LIMIT 1`);\n const row=r.rows[0] as any;if(!row)return `${label}:no-connection`;if(!row.refresh_token_enc)return `${label}:no-refresh-token`;if(Number(row.expires_at||0)>Date.now()+60*60*1000)return `${label}:healthy`;\n const clientId=await setting(clientKey);if(!clientId)return `${label}:no-client-id`;\n const form=new URLSearchParams({grant_type:\"refresh_token\",client_id:clientId,refresh_token:await dec(row.refresh_token_enc),resource});\n const res=await fetch(tokenEndpoint,{method:\"POST\",headers:{\"Content-Type\":\"application/x-www-form-urlencoded\",\"Accept\":\"application/json\"},body:form});const t:any=await res.json().catch(()=>({}));if(!res.ok||!t.access_token)throw new Error(`${label}:${t.error_description||t.error||\"refresh failed\"}`);\n const refresh=t.refresh_token?String(t.refresh_token):await dec(row.refresh_token_enc),now=Date.now();await sqlite.execute({sql:`UPDATE ${table} SET access_token_enc=?,refresh_token_enc=?,scope=?,token_type=?,expires_at=?,updated_at=? WHERE id=1`,args:[await enc(String(t.access_token)),await enc(refresh),String(t.scope||\"mcp:tt4b\"),String(t.token_type||\"Bearer\"),t.expires_in?now+Number(t.expires_in)*1000:null,now]});return `${label}:renewed`;\n}\n\nasync function refreshMcp(){\n const r=await sqlite.execute(`SELECT access_token_enc,refresh_token_enc,expires_at FROM tt4b_mcp_connections WHERE id=1 LIMIT 1`);\n const row=r.rows[0] as any;\n if(!row) return \"mcp:no-connection\";\n if(!row.refresh_token_enc) return \"mcp:no-refresh-token\";\n if(Number(row.expires_at||0)>Date.now()+60*60*1000) return \"mcp:healthy\";\n const clientId=await setting(\"tt4b_mcp_client_id\");\n if(!clientId) return \"mcp:no-client-id\";\n const form=new URLSearchParams({grant_type:\"refresh_token\",client_id:clientId,refresh_token:await dec(row.refresh_token_enc),resource:MCP_RESOURCE});\n const res=await fetch(MCP_TOKEN,{method:\"POST\",headers:{\"Content-Type\":\"application/x-www-form-urlencoded\",\"Accept\":\"application/json\"},body:form});\n const t:any=await res.json().catch(()=>({}));\n if(!res.ok||!t.access_token) throw new Error(`mcp:${t.error_description||t.error||\"refresh failed\"}`);\n const refresh=t.refresh_token?String(t.refresh_token):await dec(row.refresh_token_enc);\n const now=Date.now();\n await sqlite.execute({sql:`UPDATE tt4b_mcp_connections SET access_token_enc=?,refresh_token_enc=?,scope=?,token_type=?,expires_at=?,updated_at=? WHERE id=1`,args:[await enc(String(t.access_token)),await enc(refresh),String(t.scope||\"mcp:tt4b\"),String(t.token_type||\"Bearer\"),t.expires_in?now+Number(t.expires_in)*1000:null,now]});\n return \"mcp:renewed\";\n}\n\nasync function refreshShopCreator(){\n const r=await sqlite.execute(`SELECT open_id,refresh_token_enc,access_expires_at,refresh_expires_at FROM shop_creator_connections ORDER BY updated_at DESC LIMIT 1`);\n const row=r.rows[0] as any;\n if(!row) return \"shop:no-connection\";\n if(Number(row.refresh_expires_at||0) && Number(row.refresh_expires_at)Date.now()+24*60*60*1000) return \"shop:healthy\";\n const appKey=await setting(\"shop_app_key\"), secretEnc=await setting(\"shop_app_secret_enc\");\n if(!appKey||!secretEnc) return \"shop:no-credentials\";\n const u=new URL(\"https://auth.tiktok-shops.com/api/v2/token/refresh\");\n u.searchParams.set(\"app_key\",appKey);u.searchParams.set(\"app_secret\",await dec(secretEnc));u.searchParams.set(\"refresh_token\",await dec(row.refresh_token_enc));u.searchParams.set(\"grant_type\",\"refresh_token\");\n const res=await fetch(u.toString(),{headers:{\"Cache-Control\":\"no-cache\"}});\n const j:any=await res.json(); const d=j?.data||j;\n if(!res.ok||j?.code!==0||!d?.access_token) throw new Error(`shop:${j?.message||j?.msg||\"refresh failed\"}`);\n if(d.user_type!==undefined && Number(d.user_type)!==1) throw new Error(\"shop:refreshed token is not creator identity\");\n if(d.open_id && String(d.open_id)!==String(row.open_id)) throw new Error(\"shop:open_id changed unexpectedly\");\n const refresh = d.refresh_token ? String(d.refresh_token) : await dec(row.refresh_token_enc);\n const scopes=Array.isArray(d.granted_scopes)?d.granted_scopes.join(\",\"):String(d.granted_scopes||\"\");\n const now=Date.now();\n await sqlite.execute({sql:`UPDATE shop_creator_connections SET access_token_enc=?,refresh_token_enc=?,granted_scopes=?,access_expires_at=?,refresh_expires_at=?,updated_at=? WHERE open_id=?`,args:[await enc(String(d.access_token)),await enc(refresh),scopes,Number(d.access_token_expire_in||0)*1000,Number(d.refresh_token_expire_in||0)*1000,now,row.open_id]});\n return \"shop:renewed\";\n}\n\nexport default async function(){\n const results:string[]=[];\n try{results.push(await refreshMcp());}catch(e){results.push(String((e as Error).message||e));}\n try{results.push(await refreshMcpTable(\"tt4b_mcp_flat_connections\",\"tt4b_mcp_flat_client_id\",MCP_FLAT_RESOURCE,MCP_FLAT_TOKEN,\"mcp-flat\"));}catch(e){results.push(String((e as Error).message||e));}\n try{results.push(await refreshCore());}catch(e){results.push(String((e as Error).message||e));}\n try{results.push(await refreshShopCreator());}catch(e){results.push(String((e as Error).message||e));}\n console.log(\"TikTok bridge refresh:\",results.join(\" | \"));\n}","deleted","children",[],[83],"9838e355-6044-496d-8db2-fc1367c39f90","monitor.ts","ba770d7e-9c0d-11f1-ae46-1607ee4eb77e",33,["D",1787172662499],2,"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nasync function scalar(sql:string,args:any[]=[]){const r=await sqlite.execute({sql,args});const row=r.rows[0] as any;return row?Object.values(row)[0]:null;}\nasync function setting(k:string){const r=await sqlite.execute({sql:`SELECT value FROM settings WHERE key=? LIMIT 1`,args:[k]});return (r.rows[0] as any)?.value as string|undefined;}\n\nexport default async function(){\n await sqlite.batch([\n `CREATE TABLE IF NOT EXISTS health_events (id INTEGER PRIMARY KEY AUTOINCREMENT, fingerprint TEXT NOT NULL, payload TEXT NOT NULL, created_at INTEGER NOT NULL)`,\n `CREATE INDEX IF NOT EXISTS idx_health_events_created ON health_events(created_at)`,\n `DELETE FROM oauth_states WHERE expires_at < ${Date.now()}`,\n `DELETE FROM health_events WHERE created_at < ${Date.now()-30*24*60*60*1000}`\n ]);\n const coreCreds=!!(await setting('tiktok_client_key'));\n const shopCreds=!!(await setting('shop_app_key'));\n const mcpRegistered=!!(await setting('tt4b_mcp_client_id'));\n const mcpFlatRegistered=!!(await setting('tt4b_mcp_flat_client_id'));\n const coreConnections=Number(await scalar(`SELECT COUNT(*) AS n FROM tiktok_connections`)||0);\n const shopConnections=Number(await scalar(`SELECT COUNT(*) AS n FROM shop_creator_connections`)||0);\n const mcpConnections=Number(await scalar(`SELECT COUNT(*) AS n FROM tt4b_mcp_connections`)||0);\n const mcpFlatConnections=Number(await scalar(`SELECT COUNT(*) AS n FROM tt4b_mcp_flat_connections`)||0);\n const queue=Number(await scalar(`SELECT COUNT(*) AS n FROM content_queue WHERE status IN ('draft','ready','queued')`)||0);\n const payload={time:new Date().toISOString(),mcp_registered:mcpRegistered,mcp_connections:mcpConnections,mcp_flat_registered:mcpFlatRegistered,mcp_flat_connections:mcpFlatConnections,core_credentials:coreCreds,core_connections:coreConnections,shop_credentials:shopCreds,shop_connections:shopConnections,queue_pending:queue,bridge:'online'};\n const fingerprint=JSON.stringify([mcpRegistered,mcpConnections,mcpFlatRegistered,mcpFlatConnections,coreCreds,coreConnections,shopCreds,shopConnections,queue]);\n const last=await sqlite.execute(`SELECT fingerprint FROM health_events ORDER BY id DESC LIMIT 1`);\n if((last.rows[0] as any)?.fingerprint!==fingerprint){\n await sqlite.execute({sql:`INSERT INTO health_events(fingerprint,payload,created_at) VALUES(?,?,?)`,args:[fingerprint,JSON.stringify(payload),Date.now()]});\n console.log('TikTok bridge state changed:',JSON.stringify(payload));\n }else console.log('TikTok bridge monitor: unchanged');\n}",[],[97],["D",1787172910300],[],[19],"e683e56b-bdd6-4c21-8145-fbc28f819434","README.md","01a01b9b-16b5-7082-8a0d-317ddff9e672",1,["D",1787169543745],"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"root.tsx\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n root.tsx ← HTML shell (stamps immutable asset URLs)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/root.tsx`** is the HTML shell — it loads Twind and stamps\n immutable asset URLs for the favicon and React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types\n\nTemplate updates and upgrade paths for existing remixes: [CHANGELOG.md](/CHANGELOG.md)\n",[],[109],"44fe9358-7ace-4cfd-b039-26a5bf01bba5","CHANGELOG.md","01a01b9b-16b5-7082-8a0d-2fc4d2c12c9e",["D",1787169543745],"# Changelog\n\n## 2026-07-30 — Immutable asset caching\n\nFrontend files are now served at version-addressed URLs\n(`/__immutable/45/frontend/index.tsx`) with\n`Cache-Control: public, max-age=31536000, immutable`, so repeat visits load the\nwhole client graph from the browser cache — roughly 3× faster (~665ms → ~157ms\nmeasured). Publishing your val bumps its version, which changes every URL, so\ncaches invalidate automatically. Old-version URLs return 404 after a publish\n(like Next.js build assets); a reload picks up the new version.\n\nWhat changed in the template:\n\n- `frontend/index.html` → [`frontend/root.tsx`](/frontend/root.tsx): the HTML\n shell is now JSX and stamps asset URLs with `immutableFileUrl()`\n- [`index.ts`](/index.ts): serves `Root()` at `/`, and one\n `app.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path))` route\n serves all frontend files\n\n### Upgrading an existing remix\n\nYour copy of this template doesn't update automatically. Two options:\n\n**Minimal (most of the benefit):** point both routes at `serveImmutableFile` —\nyour existing bare URLs redirect into versioned space, the new route serves\nthem, and the whole module graph gets cached (costs one redirect per page view):\n\n```ts\nimport { serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\n\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/frontend/**/*\", (c) => serveImmutableFile(c.req.path)); // was serveFile\n```\n\n**Full upgrade (also removes the redirect):** three self-contained steps —\nno other files needed. Adjust the ``, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n return (\n <>\n {raw(\"<!DOCTYPE html>\")}\n <html lang=\"en\">\n <head>\n <meta charSet=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>React Hono Val Town Starter\n