45:o1,~45:o80c,2:"$Sreact.fragment" 3:"/chat-static/_next/static/immutable/chunks/3hgpkj-xzfw6u.js" 4:I[381307,["$3"],"default"] 5:I[934914,["$3"],"default"] 39:"ViewportBoundary" 3a:I[176645,["$3"],"$39"] 3c:"MetadataBoundary" 3d:I[176645,["$3"],"$3c"] 3e:"$Sreact.suspense" :HL["/chat-static/_next/static/immutable/chunks/2j35sgti2x-ap.css","style"] :HL["/chat-static/_next/static/immutable/chunks/2r0hc1yco75fk.css","style"] :HL["/chat-static/_next/static/immutable/chunks/176nhfyswbwwb.css","style"] :HL["/chat-static/_next/static/immutable/chunks/2va7g60oc736i.css","style"] 1:X 6:X 18:X 1b:X 22:X 20:[["children",{"s":"__PAGE__","h":162,"d":{"r":"$L21","p":false,"v":"$22"}}]] 1e:[["children",{"s":{"n":"id","t":"d","k":"approval-gate-YbBjtqkPLom","s":null},"h":98,"d":{"r":"$L1f","p":false,"v":"$6"},"c":"$Q20"}]] 2c:X 2a:[["children",{"s":"__PAGE__","h":2,"d":{"r":"$L2b","p":false,"v":"$2c"}}]] 28:[["children",{"s":{"n":"id","t":"d","k":"approval-gate-YbBjtqkPLom","s":null},"h":38,"d":{"r":"$L29","p":false,"v":"$6"},"c":"$Q2a"}]] 26:[["children",{"s":"chat","h":106,"d":{"r":"$L27","p":false,"v":"$6"},"c":"$Q28"}]] 24:[["children",{"s":"(chat)","h":106,"d":{"r":"$L25","p":false,"v":"$6"},"c":"$Q26"}]] 36:X 34:[["children",{"s":"__PAGE__","h":34,"d":{"r":"$L35","p":false,"v":"$36"}}]] 32:[["children",{"s":{"n":"id","t":"d","k":"approval-gate-YbBjtqkPLom","s":null},"h":102,"d":{"r":"$L33","p":false,"v":"$6"},"c":"$Q34"}]] 30:[["children",{"s":"chat","h":106,"d":{"r":"$L31","p":false,"v":"$6"},"c":"$Q32"}]] 2e:[["children",{"s":"(chat)","h":106,"d":{"r":"$L2f","p":false,"v":"$6"},"c":"$Q30"}]] 38:X 1c:[["children",{"s":"chat","h":98,"d":{"r":"$L1d","p":false,"v":"$6"},"c":"$Q1e"}],["content",{"s":"(__SLOT__)","h":74,"d":{"r":"$L23","p":false,"v":"$6"},"c":"$Q24"}],["header",{"s":"(__SLOT__)","h":74,"d":{"r":"$L2d","p":false,"v":"$6"},"c":"$Q2e"}],["sidebar",{"s":"__DEFAULT__","h":2,"d":{"r":"$L37","p":false,"v":"$38"}}]] 19:[["children",{"s":{"n":"scope","t":"d","k":"vercel-labs","s":null},"h":74,"d":{"r":"$L1a","p":false,"v":"$1b"},"c":"$Q1c"}]] 45:oc43,8:[["children",{"s":"(dynamic-root)","h":58,"d":{"r":["$","$2","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/chat-static/_next/static/immutable/chunks/2j35sgti2x-ap.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/chat-static/_next/static/immutable/chunks/2r0hc1yco75fk.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","2",{"rel":"stylesheet","href":"/chat-static/_next/static/immutable/chunks/176nhfyswbwwb.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","3",{"rel":"stylesheet","href":"/chat-static/_next/static/immutable/chunks/2va7g60oc736i.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/333txvmhatl26.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/chat-static/_next/static/immutable/chunks/0w1lrom8rw5ju.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/chat-static/_next/static/immutable/chunks/0x4-3nkgsq4e6.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/chat-static/_next/static/immutable/chunks/1aewy7yrnlnw1.js","async":true,"nonce":"$undefined"}],["$","script","script-4",{"src":"/chat-static/_next/static/immutable/chunks/0_szic-zyfps5.js","async":true,"nonce":"$undefined"}],["$","script","script-5",{"src":"/chat-static/_next/static/immutable/chunks/1ipvi6larhy3t.js","async":true,"nonce":"$undefined"}],["$","script","script-6",{"src":"/chat-static/_next/static/immutable/chunks/3ns0-t8rn_3z7.js","async":true,"nonce":"$undefined"}],["$","script","script-7",{"src":"/chat-static/_next/static/immutable/chunks/3941mm2kmjqco.js","async":true,"nonce":"$undefined"}],["$","script","script-8",{"src":"/chat-static/_next/static/immutable/chunks/2hnc1lvy4flvw.js","async":true,"nonce":"$undefined"}],["$","script","script-9",{"src":"/chat-static/_next/static/immutable/chunks/0ndudxt1u55xy.js","async":true,"nonce":"$undefined"}],["$","script","script-10",{"src":"/chat-static/_next/static/immutable/chunks/03nhcvuueyffp.js","async":true,"nonce":"$undefined"}],["$","script","script-11",{"src":"/chat-static/_next/static/immutable/chunks/0xd1jmbsccuw8.js","async":true,"nonce":"$undefined"}],["$","script","script-12",{"src":"/chat-static/_next/static/immutable/chunks/3ezjq7shv0amj.js","async":true,"nonce":"$undefined"}],["$","script","script-13",{"src":"/chat-static/_next/static/immutable/chunks/3vwuml-2j-v_n.js","async":true,"nonce":"$undefined"}],["$","script","script-14",{"src":"/chat-static/_next/static/immutable/chunks/2opuakn4fr21i.js","async":true,"nonce":"$undefined"}],["$","script","script-15",{"src":"/chat-static/_next/static/immutable/chunks/3vtygwvq7xe_3.js","async":true,"nonce":"$undefined"}],["$","script","script-16",{"src":"/chat-static/_next/static/immutable/chunks/2oipqvbpnalaz.js","async":true,"nonce":"$undefined"}],"$L9","$La","$Lb","$Lc","$Ld","$Le","$Lf","$L10","$L11","$L12","$L13","$L14","$L15","$L16"],"$L17"]}],"p":false,"v":"$18"},"c":"$Q19"}]] 45:o1d7,7:[["children",{"s":{"n":"variants","t":"d","k":"v0pprvariant-0-0-en-","s":null},"h":122,"d":{"r":["$","$2","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],"p":false,"v":"$6"},"c":"$Q8"}]] 40:X 41:X 45:o716,0:{"q":"","i":false,"S":true,"r":"$1","t":{"t":{"s":"","h":90,"d":{"r":["$","$2","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],[]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}],"p":false,"v":"$6"},"c":"$Q7"},"h":{"r":["$","$2","h",{"children":[null,["$","$L3a","_GGi5hiGuPDkZlRVBAIQdv",{"children":"$L3b"}],["$","div","_GGi5hiGuPDkZlRVBAIQdm",{"hidden":true,"children":["$","$L3d",null,{"children":["$","$3e",null,{"name":"Next.Metadata","children":"$L3f"}]}]}]]}],"p":false,"v":"$40"}},"s":"$41","a":"$@42","w":"$@43"} 45:o1000,45:I[176645,["$3"],"OutletBoundary"] 47:"LoadingBoundaryProvider" 48:I[381307,["$3"],"$47"] 51:"/chat-static/_next/static/immutable/chunks/333txvmhatl26.js" 52:"/chat-static/_next/static/immutable/chunks/0w1lrom8rw5ju.js" 53:"/chat-static/_next/static/immutable/chunks/0x4-3nkgsq4e6.js" 54:"/chat-static/_next/static/immutable/chunks/1aewy7yrnlnw1.js" 55:"/chat-static/_next/static/immutable/chunks/0_szic-zyfps5.js" 56:"/chat-static/_next/static/immutable/chunks/1ipvi6larhy3t.js" 57:"/chat-static/_next/static/immutable/chunks/3ns0-t8rn_3z7.js" 58:"/chat-static/_next/static/immutable/chunks/3941mm2kmjqco.js" 59:"/chat-static/_next/static/immutable/chunks/2hnc1lvy4flvw.js" 5a:"/chat-static/_next/static/immutable/chunks/0ndudxt1u55xy.js" 5b:"/chat-static/_next/static/immutable/chunks/03nhcvuueyffp.js" 5c:"/chat-static/_next/static/immutable/chunks/0xd1jmbsccuw8.js" 5d:"/chat-static/_next/static/immutable/chunks/3ezjq7shv0amj.js" 5e:"/chat-static/_next/static/immutable/chunks/3vwuml-2j-v_n.js" 5f:"/chat-static/_next/static/immutable/chunks/2opuakn4fr21i.js" 60:"/chat-static/_next/static/immutable/chunks/3vtygwvq7xe_3.js" 61:"/chat-static/_next/static/immutable/chunks/2oipqvbpnalaz.js" 62:"/chat-static/_next/static/immutable/chunks/1lff788ic9m6v.js" 63:"/chat-static/_next/static/immutable/chunks/3nfhzou9aygx6.js" 64:"/chat-static/_next/static/immutable/chunks/02pdgqm2qxcw6.js" 65:"/chat-static/_next/static/immutable/chunks/3_b2wbin-ikog.js" 66:"/chat-static/_next/static/immutable/chunks/1t4aphgbcggb9.js" 67:"/chat-static/_next/static/immutable/chunks/22d52d8i9k163.js" 68:"/chat-static/_next/static/immutable/chunks/370qaxhp6l_t8.js" 69:"/chat-static/_next/static/immutable/chunks/3noaaw7xa00yr.js" 6a:"/chat-static/_next/static/immutable/chunks/3x3d0xhdn2hbu.js" 6b:"/chat-static/_next/static/immutable/chunks/024-t3_x03fhs.js" 6c:"/chat-static/_next/static/immutable/chunks/3xfqd79v-con1.js" 6d:"/chat-static/_next/static/immutable/chunks/10nyt517pjj02.js" 6e:"/chat-static/_next/static/immutable/chunks/2hksw6-emq6gn.js" 6f:"/chat-static/_next/static/immutable/chunks/00g4sstgoh_5s.js" 70:"/chat-static/_next/static/immutable/chunks/3nmman87rutjo.js" 71:"/chat-static/_next/static/immutable/chunks/2sbbirxir76sy.js" 72:"/chat-static/_next/static/immutable/chunks/0ldukmpethkzp.js" 73:"/chat-static/_next/static/immutable/chunks/1dl0dkng3xad8.js" 74:"/chat-static/_next/static/immutable/chunks/039ug5x9szqew.js" 75:"/chat-static/_next/static/immutable/chunks/31efu3f_kf5mb.js" 76:"/chat-static/_next/static/immutable/chunks/011gun9_73cts.js" 77:"/chat-static/_next/static/immutable/chunks/2rd-gzlzqmubv.js" 78:"/chat-static/_next/static/immutable/chunks/0ik0krwm72obb.js" 79:"/chat-static/_next/static/immutable/chunks/0bx93s4h6yv9g.js" 7a:"/chat-static/_next/static/immutable/chunks/1poas671b2yj6.js" 7b:"/chat-static/_next/static/immutable/chunks/0tgmdjyd9zi-e.js" 7c:"/chat-static/_next/static/immutable/chunks/3_23dcp96bjpu.js" 7d:"/chat-static/_next/static/immutable/chunks/0_gorie14y0z_.js" 7e:"/chat-static/_next/static/immutable/chunks/2k3cc8nxs2vo4.js" 7f:"/chat-static/_next/static/immutable/chunks/1sjlfwgirqkds.js" 80:I[822201,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$7d","$7e","$7f"],"default"] 81:"/chat-static/_next/static/immutable/chunks/13lhdvl7d4fe4.js" 82:"/chat-static/_next/static/immutable/chunks/2ep_sm1kucpij.js" 83:"/chat-static/_next/static/immutable/chunks/02y4-f6a-dkjp.js" 84:"/chat-static/_next/static/immutable/chunks/3_x3oo4l7hl52.js" 85:"/chat-static/_next/static/immutable/chunks/1myf2--w88b7m.js" 86:"/chat-static/_next/static/immutable/chunks/2s7yjppybqlx-.js" 87:"/chat-static/_next/static/immutable/chunks/1dqrul6p54_d_.js" 88:"/chat-static/_next/static/immutable/chunks/1xaqt9_cvhvsi.js" 89:"/chat-static/_next/static/immutable/chunks/2ui17mnz1nch3.js" 8a:"/chat-static/_next/static/immutable/chunks/0ui-wcvb3h45:o8d8,5rt.js" 8b:"GitChatHeaderSkeleton" 8c:I[70040,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$81","$82","$83","$7e","$84","$85","$7f","$86","$87","$88","$89","$8a","$7d"],"$8b"] 6:C 9:["$","script","script-17",{"src":"/chat-static/_next/static/immutable/chunks/1lff788ic9m6v.js","async":true,"nonce":"$undefined"}] a:["$","script","script-18",{"src":"/chat-static/_next/static/immutable/chunks/3nfhzou9aygx6.js","async":true,"nonce":"$undefined"}] b:["$","script","script-19",{"src":"/chat-static/_next/static/immutable/chunks/02pdgqm2qxcw6.js","async":true,"nonce":"$undefined"}] c:["$","script","script-20",{"src":"/chat-static/_next/static/immutable/chunks/3_b2wbin-ikog.js","async":true,"nonce":"$undefined"}] d:["$","script","script-21",{"src":"/chat-static/_next/static/immutable/chunks/1t4aphgbcggb9.js","async":true,"nonce":"$undefined"}] e:["$","script","script-22",{"src":"/chat-static/_next/static/immutable/chunks/22d52d8i9k163.js","async":true,"nonce":"$undefined"}] f:["$","script","script-23",{"src":"/chat-static/_next/static/immutable/chunks/370qaxhp6l_t8.js","async":true,"nonce":"$undefined"}] 10:["$","script","script-24",{"src":"/chat-static/_next/static/immutable/chunks/3noaaw7xa00yr.js","async":true,"nonce":"$undefined"}] 11:["$","script","script-25",{"src":"/chat-static/_next/static/immutable/chunks/3x3d0xhdn2hbu.js","async":true,"nonce":"$undefined"}] 12:["$","script","script-26",{"src":"/chat-static/_next/static/immutable/chunks/024-t3_x03fhs.js","async":true,"nonce":"$undefined"}] 13:["$","script","script-27",{"src":"/chat-static/_next/static/immutable/chunks/3xfqd79v-con1.js","async":true,"nonce":"$undefined"}] 14:["$","script","script-28",{"src":"/chat-static/_next/static/immutable/chunks/10nyt517pjj02.js","async":true,"nonce":"$undefined"}] 15:["$","script","script-29",{"src":"/chat-static/_next/static/immutable/chunks/2hksw6-emq6gn.js","async":true,"nonce":"$undefined"}] 16:["$","script","script-30",{"src":"/chat-static/_next/static/immutable/chunks/00g4sstgoh_5s.js","async":true,"nonce":"$undefined"}] 45:o644,1a:["$","$2","c",{"children":[[["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/3nmman87rutjo.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/chat-static/_next/static/immutable/chunks/2sbbirxir76sy.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/chat-static/_next/static/immutable/chunks/0ldukmpethkzp.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/chat-static/_next/static/immutable/chunks/1dl0dkng3xad8.js","async":true,"nonce":"$undefined"}],["$","script","script-4",{"src":"/chat-static/_next/static/immutable/chunks/039ug5x9szqew.js","async":true,"nonce":"$undefined"}],["$","script","script-5",{"src":"/chat-static/_next/static/immutable/chunks/31efu3f_kf5mb.js","async":true,"nonce":"$undefined"}],["$","script","script-6",{"src":"/chat-static/_next/static/immutable/chunks/011gun9_73cts.js","async":true,"nonce":"$undefined"}],["$","script","script-7",{"src":"/chat-static/_next/static/immutable/chunks/2rd-gzlzqmubv.js","async":true,"nonce":"$undefined"}],["$","script","script-8",{"src":"/chat-static/_next/static/immutable/chunks/0ik0krwm72obb.js","async":true,"nonce":"$undefined"}],["$","script","script-9",{"src":"/chat-static/_next/static/immutable/chunks/0bx93s4h6yv9g.js","async":true,"nonce":"$undefined"}],["$","script","script-10",{"src":"/chat-static/_next/static/immutable/chunks/1poas671b2yj6.js","async":true,"nonce":"$undefined"}],["$","script","script-11",{"src":"/chat-static/_next/static/immutable/chunks/0tgmdjyd9zi-e.js","async":true,"nonce":"$undefined"}]],"$L44"]}] 45:o29a,1d:["$","$2","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 1f:["$","$2","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 45:o6a3,21:["$","$2","c",{"children":[null,[["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/15398pz7svuoo.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/chat-static/_next/static/immutable/chunks/2ep_sm1kucpij.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/chat-static/_next/static/immutable/chunks/02y4-f6a-dkjp.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/chat-static/_next/static/immutable/chunks/1myf2--w88b7m.js","async":true,"nonce":"$undefined"}],["$","script","script-4",{"src":"/chat-static/_next/static/immutable/chunks/3_x3oo4l7hl52.js","async":true,"nonce":"$undefined"}],["$","script","script-5",{"src":"/chat-static/_next/static/immutable/chunks/0_gorie14y0z_.js","async":true,"nonce":"$undefined"}],["$","script","script-6",{"src":"/chat-static/_next/static/immutable/chunks/2ui17mnz1nch3.js","async":true,"nonce":"$undefined"}],["$","script","script-7",{"src":"/chat-static/_next/static/immutable/chunks/2s7yjppybqlx-.js","async":true,"nonce":"$undefined"}],["$","script","script-8",{"src":"/chat-static/_next/static/immutable/chunks/1xaqt9_cvhvsi.js","async":true,"nonce":"$undefined"}],["$","script","script-9",{"src":"/chat-static/_next/static/immutable/chunks/1dqrul6p54_d_.js","async":true,"nonce":"$undefined"}],["$","script","script-10",{"src":"/chat-static/_next/static/immutable/chunks/0ui-wcvb3h5rt.js","async":true,"nonce":"$undefined"}],["$","script","script-11",{"src":"/chat-static/_next/static/immutable/chunks/1sjlfwgirqkds.js","async":true,"nonce":"$undefined"}]],["$","$L45",null,{"children":["$","$3e",null,{"name":"Next.MetadataOutlet","children":"$@46"}]}]]}] 45:o3e7,23:["$","$2","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 25:["$","$2","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 27:["$","$2","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 45:o10ed,29:["$","$L48",null,{"loading":[["$","$2","l",{"children":[["$","div",null,{"data-chat-skeleton-layout":true,"className":"flex-1 w-full flex","children":[["$","div",null,{"data-input":true,"className":"flex","children":["$","div",null,{"data-skeleton-chat-column":true,"className":"flex flex-col size-full pt-4 px-2 pb-2","children":[["$","div",null,{"className":"flex-1 overflow-hidden mask-[linear-gradient(to_bottom,black_0%,transparent_100%)]","children":["$","div",null,{"className":"max-w-3xl mx-auto w-full flex-col pt-2","children":[["$","div",null,{"className":"@container/message group w-full [&_code]:break-all wrap-break-word flex flex-col gap-2 origin-right items-end px-2","data-testid":"skeleton-message","role":"listitem","children":[["$","div",null,{"className":"flex items-end sm:max-w-[min(fit-content,80%)] max-w-[90%] origin-top-right","children":["$","div",null,{"className":"border border-v0-gray-200 text-left relative rounded-[16px] bg-v0-gray-200 px-3 py-1.5 min-w-0 wrap-break-word group/message-bubble","children":[["$","svg",null,{"width":"16","height":"16","className":"absolute -top-[6px] right-0","fill":"var(--v0-gray-200)","children":["$","path",null,{"d":"M-2.70729e-07 6.19355C8 6.19355 12 4.12903 16 6.99382e-07C16 6.70968 16 13.5 10 16L-2.70729e-07 6.19355Z"}]}],["$","div",null,{"style":{"width":900,"height":120}}]]}]}],["$","div",null,{"className":"flex items-center gap-1 justify-end flex-row-reverse mr-[-2px] h-6"}]]}],["$","div",null,{"className":"flex flex-col w-full gap-4 px-2","children":[["$","div",null,{"className":"h-6 w-full flex flex-row gap-2","children":[["$","div",null,{"className":"bg-v0-gray-300 min-w-4 h-4 rounded-full"}],["$","div",null,{"className":"bg-v0-gray-300 h-4 rounded-md w-[70%] max-w-[200px]"}]]}],["$","div",null,{"className":"gap-1 flex flex-col w-full relative","children":[["$","div","0",{"className":"bg-v0-gray-300 h-4 rounded-md","style":{"width":"100%"}}],["$","div","1",{"className":"bg-v0-gray-300 h-4 rounded-md","style":{"width":"100%"}}],["$","div","2",{"className":"bg-v0-gray-300 h-4 rounded-md","style":{"width":"100%"}}],["$","div","3",{"className":"bg-v0-gray-300 h-4 rounded-md","style":{"width":"100%"}}],["$","div","4",{"className":"bg-v0-gray-300 h-4 rounded-md","style":{"width":"40%"}}]]}],["$","div",null,{"className":"h-6 w-full flex flex-row gap-2","children":[["$","div",null,{"className":"bg-v0-gray-300 min-w-4 h-4 rounded-full"}],["$","div",null,{"className":"bg-v0-gray-300 h-4 rounded-md w-[70%] max-w-[200px]"}]]}],["$","div",null,{"className":"gap-1 flex flex-col w-full relative","children":[["$","div","0",{"className":"bg-v0-gray-300 h-4 rounded-md","style":{"width":"100%"}}],["$","div","1",{"className":"bg-v0-gray-300 h-4 rounded-md","style":{"width":"100%"}}],["$","div","2",{"className":"bg-v0-gray-300 h-4 rounded-md","style":{"width":"40%"}}]]}],["$","div",null,{"className":"h-6 w-full flex flex-row gap-2","children":[["$","div",null,{"className":"bg-v0-gray-300 min-w-4 h-4 rounded-full"}],["$","div",null,{"className":"bg-v0-gray-300 h-4 rounded-md w-[70%] max-w-[200px]"}]]}]]}],["$","div",null,{"className":"@container/message group w-full [&_code]:break-all wrap-break-word flex flex-col gap-2 origin-right items-end px-2","data-testid":"skeleton-message","role":"listitem","children":[["$","div",null,{"className":"flex items-end sm:max-w-[min(fit-content,80%)] max-w-[90%] origin-top-right","children":["$","div",null,{"className":"border border-v0-gray-200 text-left relative rounded-[16px] bg-v0-gray-200 px-3 py-1.5 min-w-0 wrap-break-word group/message-bubble","children":[["$","svg",null,{"width":"16","height":"16","className":"absolute -top-[6px] right-0","fill":"var(--v0-gray-200)","children":["$","path",null,{"d":"M-2.70729e-07 6.19355C8 6.19355 12 4.12903 16 6.99382e-07C16 6.70968 16 13.5 10 16L-2.70729e-07 6.19355Z"}]}],["$","div",null,{"style":{"width":900,"height":120}}]]}]}],["$","div",null,{"className":"flex items-center gap-1 justify-end flex-row-reverse mr-[-2px] h-6"}]]}]]}]}],["$","div",null,{"className":"mx-auto w-full max-w-3xl","children":["$","div",null,{"className":"p-1.5 flex items-center gap-1 rounded-xl material-medium bg-v0-background-300 border border-v0-alpha-400","children":["$L49","$L4a","$L4b","$L4c"]}]}]]}]}],"$L4d"]}],"$L4e"]}],[],null],"children":"$L4f"}] 45:o649,2b:["$","$2","c",{"children":["$L50",[["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/15398pz7svuoo.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/chat-static/_next/static/immutable/chunks/2ep_sm1kucpij.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/chat-static/_next/static/immutable/chunks/02y4-f6a-dkjp.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/chat-static/_next/static/immutable/chunks/1myf2--w88b7m.js","async":true,"nonce":"$undefined"}],["$","script","script-4",{"src":"/chat-static/_next/static/immutable/chunks/3_x3oo4l7hl52.js","async":true,"nonce":"$undefined"}],["$","script","script-5",{"src":"/chat-static/_next/static/immutable/chunks/0_gorie14y0z_.js","async":true,"nonce":"$undefined"}],["$","script","script-6",{"src":"/chat-static/_next/static/immutable/chunks/2ui17mnz1nch3.js","async":true,"nonce":"$undefined"}],["$","script","script-7",{"src":"/chat-static/_next/static/immutable/chunks/2s7yjppybqlx-.js","async":true,"nonce":"$undefined"}],["$","script","script-8",{"src":"/chat-static/_next/static/immutable/chunks/1xaqt9_cvhvsi.js","async":true,"nonce":"$undefined"}],["$","script","script-9",{"src":"/chat-static/_next/static/immutable/chunks/1dqrul6p54_d_.js","async":true,"nonce":"$undefined"}],["$","script","script-10",{"src":"/chat-static/_next/static/immutable/chunks/0ui-wcvb3h5rt.js","async":true,"nonce":"$undefined"}],["$","script","script-11",{"src":"/chat-static/_next/static/immutable/chunks/1sjlfwgirqkds.js","async":true,"nonce":"$undefined"}]],null]}] 45:o780,2d:["$","$2","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 2f:["$","$2","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 31:["$","$2","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 33:["$","$L48",null,{"loading":[["$","$L80","l",{}],[],[["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/3_23dcp96bjpu.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/chat-static/_next/static/immutable/chunks/0_gorie14y0z_.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/chat-static/_next/static/immutable/chunks/2k3cc8nxs2vo4.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/chat-static/_next/static/immutable/chunks/1sjlfwgirqkds.js","async":true,"nonce":"$undefined"}]]],"children":["$","$2","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}]}] 45:o70a,35:["$","$2","c",{"children":[["$","$3e",null,{"fallback":["$","$L8c",null,{}],"children":"$L8d"}],[["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/13lhdvl7d4fe4.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/chat-static/_next/static/immutable/chunks/2ep_sm1kucpij.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/chat-static/_next/static/immutable/chunks/02y4-f6a-dkjp.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/chat-static/_next/static/immutable/chunks/2k3cc8nxs2vo4.js","async":true,"nonce":"$undefined"}],["$","script","script-4",{"src":"/chat-static/_next/static/immutable/chunks/3_x3oo4l7hl52.js","async":true,"nonce":"$undefined"}],["$","script","script-5",{"src":"/chat-static/_next/static/immutable/chunks/1myf2--w88b7m.js","async":true,"nonce":"$undefined"}],["$","script","script-6",{"src":"/chat-static/_next/static/immutable/chunks/1sjlfwgirqkds.js","async":true,"nonce":"$undefined"}],["$","script","script-7",{"src":"/chat-static/_next/static/immutable/chunks/2s7yjppybqlx-.js","async":true,"nonce":"$undefined"}],["$","script","script-8",{"src":"/chat-static/_next/static/immutable/chunks/1dqrul6p54_d_.js","async":true,"nonce":"$undefined"}],["$","script","script-9",{"src":"/chat-static/_next/static/immutable/chunks/1xaqt9_cvhvsi.js","async":true,"nonce":"$undefined"}],["$","script","script-10",{"src":"/chat-static/_next/static/immutable/chunks/2ui17mnz1nch3.js","async":true,"nonce":"$undefined"}],["$","script","script-11",{"src":"/chat-static/_next/static/immutable/chunks/0ui-wcvb3h5rt.js","async":true,"nonce":"$undefined"}],["$","script","script-12",{"src":"/chat-static/_next/static/immutable/chunks/0_gorie14y0z_.js","async":true,"nonce":"$undefined"}]],null]}] 45:o32,37:["$","$2","c",{"children":["$L8e",null,null]}] 45:o93e,90:I[987761,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$81","$82","$83","$7e","$84","$85","$7f","$86","$87","$88","$89","$8a","$7d"],"AppCard"] 91:"FULL_BLEED_APP_CARD_CLASSNAME" 92:I[987761,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$81","$82","$83","$7e","$84","$85","$7f","$86","$87","$88","$89","$8a","$7d"],"$91"] 93:"/chat-static/_next/static/immutable/chunks/0vm3ydhww-1l7.js" 94:"SidebarCollapseButton" 95:I[663042,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$93"],"$94"] 96:I[192842,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$81","$82","$83","$7e","$84","$85","$7f","$86","$87","$88","$89","$8a","$7d"],"ChatWarning"] 97:I[903785,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$93"],"NewChatButton"] 41:300 49:["$","div",null,{"className":"flex size-7 shrink-0 items-center justify-center","children":["$","div",null,{"className":"animate-pulse bg-v0-gray-200 size-4 rounded"}]}] 4a:["$","div",null,{"className":"flex-1 min-w-0","children":["$","div",null,{"className":"animate-pulse bg-v0-gray-200 h-4 w-24 rounded"}]}] 4b:["$","div",null,{"className":"animate-pulse bg-v0-gray-200 h-6 w-16 rounded-md"}] 4c:["$","div",null,{"className":"animate-pulse bg-v0-gray-200 size-7 rounded-full"}] 4d:["$","div",null,{"data-output":true,"className":"bg-v0-background-200"}] 8f:T1963,45:o1963,45:o35d,4e:["$","span",null,{"data-v0-skeleton-chat-layout":"","hidden":true,"dangerouslySetInnerHTML":{"__html":"$8f"}}] 4f:["$","$2","c",{"children":[null,["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","$3e",null,{"fallback":["$","$L90",null,{"className":"$92","children":[["$","$L95",null,{"collapsedOnly":true,"syncWidth":true,"syncCollapsedMarginRight":"0px","syncExpandedMarginRight":"0px","peekOnHover":false,"className":"pointer-events-auto absolute left-3 top-3 z-20 hidden sm:flex"}],["$","$L96",null,{"description":"Loading…","title":"Chat Not Found","children":["$","$L97",null,{}]}]]}],"children":"$L98"}],[]],"forbidden":"$undefined","unauthorized":"$undefined"}]]}] 45:o17,18:T8,variants99:T18d6,45:o18d6,(({protect:a})=>{function b(a){return new Promise((b,c)=>{if(document.querySelector(`script[src="${a}"]`))return void b();let d=document.createElement("script");d.src=a,d.async=!0,d.onload=()=>b(),d.onerror=a=>{console.error("Error loading script",a),c(a)},document.head.appendChild(d)})}var c=class a{#a;#b;#c=0;constructor(){let{promise:b,resolve:c}=a.#d();this.#a=b,this.#b=c,this.#e(),window.addEventListener("online",this.#f),window.addEventListener("visibilitychange",this.#f)}getChallenge=async()=>(await this.#g(),await this.#a.then(a=>"function"==typeof a?a():a));#f=()=>{if(document.hidden)return;let{promise:b,resolve:c}=a.#d();this.#a=b,this.#b=c,window.V_C=[],window.V_C.push=c;let d=document.querySelector('script[src*="c.js"]');d&&d.remove(),this.#c+=1};#e=()=>{if(window.V_C){let a=window.V_C.pop();a&&this.#b(a)}else window.V_C=[],window.V_C.push=this.#b};#g=()=>{let a=new URL("/149e9513-01fa-4fb0-aad4-566afd725d1b/2d206a39-8ed7-437e-a3be-862e0f06eea3/a-4-a/c.js",window.location.origin);return a.searchParams.set("i",String(this.#c)),a.searchParams.set("v",String(3)),a.searchParams.set("h",window.location.host),b(a.pathname+a.search)};#h=()=>{window.V_C=void 0};static #d(){let a,b;return{promise:new Promise((c,d)=>{a=c,b=d}),resolve:a,reject:b}}},d=class a{#a=!1;#b;constructor(a){this.#b=a}get loaded(){return this.#a}load=async()=>{this.#a||await this.#f()};#c=()=>{if(typeof globalThis.window>"u")throw Error("KPSDK is not available in the server");if(!window.KPSDK)throw Error("KPSDK is not loaded");let b=this.#b.map(b=>{let c=a.#e(b.path);return{domain:c.host,path:c.pathname,method:b.method}});try{window.KPSDK.configure(b)}catch(a){console.error("Error configuring KPSDK...",a)}};#f=async()=>{let a=this;return new Promise((c,d)=>{let e=()=>{document.removeEventListener("kpsdk-load",e),this.#c()},f=()=>{document.removeEventListener("kpsdk-ready",f),a.#a=!0,c()};document.addEventListener("kpsdk-load",e,{once:!0}),document.addEventListener("kpsdk-ready",f,{once:!0}),b("/149e9513-01fa-4fb0-aad4-566afd725d1b/2d206a39-8ed7-437e-a3be-862e0f06eea3/p.js").catch(a=>{document.removeEventListener("kpsdk-load",e),document.removeEventListener("kpsdk-ready",f),d(a)})})};static #e(a){let b;try{b=new URL(a)}catch{b=new URL(a,location.origin)}return b}},e=a=>{let b=a.replace(/[.?+^$[\]\\(){}|-]/g,"\\$&").split("*").join(".*");return RegExp(`^${b}$`)},f=({path:a,pattern:b})=>-1!==a.search(b);async function g(a,b,c){let d=XMLHttpRequest.prototype.open,g=XMLHttpRequest.prototype.send;XMLHttpRequest.prototype.open=function(a,b,c,e,f){return this._requestUrl=b.toString(),this._requestMethod=a,d.call(this,a,b,c??!0,e,f)},XMLHttpRequest.prototype.send=async function(d){let h=this._requestUrl;if(!h||this._isReexecution)return g.call(this,d);let i=new URL(h,location.href),j=c.find(a=>f({path:i.pathname,pattern:e(a.path)}));if(null==j||j.method!==(this._requestMethod??"GET")&&"*"!==j.method)return g.call(this,d);let k=await a.getChallenge();if(this.setRequestHeader("x-is-human",JSON.stringify(k)),this.setRequestHeader("x-path",i.pathname),this.setRequestHeader("x-method",this._requestMethod||"GET"),0!==k.b||b.loaded||((1===k.d||j?.advancedOptions?.checkLevel==="deepAnalysis")&&await b.load(),!b.loaded))return g.call(this,d);this.setRequestHeader("x-is-human",JSON.stringify(k)),this.setRequestHeader("x-path",i.pathname),this.setRequestHeader("x-method",this._requestMethod||"GET");let l=new XMLHttpRequest;return l._isReexecution=!0,l.open(this._requestMethod||"GET",h,!0),l.setRequestHeader("x-is-human",JSON.stringify(k)),l.setRequestHeader("x-path",i.pathname),l.setRequestHeader("x-method",this._requestMethod||"GET"),this.timeout&&(l.timeout=this.timeout),this.responseType&&(l.responseType=this.responseType),this.withCredentials&&(l.withCredentials=this.withCredentials),l.onreadystatechange=()=>{Object.defineProperty(this,"readyState",{value:l.readyState,writable:!0,configurable:!0}),l.readyState===XMLHttpRequest.DONE&&(Object.defineProperty(this,"status",{value:l.status,writable:!0,configurable:!0}),Object.defineProperty(this,"statusText",{value:l.statusText,writable:!0,configurable:!0}),Object.defineProperty(this,"response",{value:l.response,writable:!0,configurable:!0}),Object.defineProperty(this,"responseText",{value:l.responseText,writable:!0,configurable:!0}),Object.defineProperty(this,"responseXML",{value:l.responseXML,writable:!0,configurable:!0}),this.getAllResponseHeaders=()=>l.getAllResponseHeaders(),this.getResponseHeader=a=>l.getResponseHeader(a)),this.onreadystatechange&&this.onreadystatechange.call(this,new Event("readystatechange"))},l.onload=a=>{this.onload&&this.onload.call(this,a)},l.onerror=a=>{this.onerror&&this.onerror.call(this,a)},l.onabort=a=>{this.onabort&&this.onabort.call(this,a)},l.ontimeout=a=>{this.ontimeout&&this.ontimeout.call(this,a)},l.onloadstart=a=>{this.onloadstart&&this.onloadstart.call(this,a)},l.onloadend=a=>{this.onloadend&&this.onloadend.call(this,a)},l.onprogress=a=>{this.onprogress&&this.onprogress.call(this,a)},l.send(d)}}!function({protect:a=[]}){let b;for(let b of a)if(b.advancedOptions?.checkLevel!==void 0&&"deepAnalysis"!==b.advancedOptions.checkLevel&&"basic"!==b.advancedOptions.checkLevel)throw Error(`Invalid checkLevel "${b.advancedOptions.checkLevel}" for route "${b.path}". Must be one of: deepAnalysis, basic`);let h=new c,i=new d(a);g(h,i,a).catch(a=>{console.error("Error patching XMLHttpRequest:",a)}),b=window.fetch,window.fetch=async(c,d)=>{let g=new URL(c instanceof Request?c.url:c,location.href),j=g.origin===location.origin,k=a.find(a=>f({path:g.pathname,pattern:e(a.path)})),l=d?.method??(c instanceof Request?c.method:"GET"),m=null!=k&&(k.method===l||"*"===k.method);if(null==k||!m||!j)return b(c,d);let n=await h.getChallenge(),o=new Headers(d?.headers||(c instanceof Request?c.headers:void 0));o.set("x-is-human",JSON.stringify(n)),o.set("x-path",g.pathname),o.set("x-method",l);let p={...d,headers:o};return i.loaded||0!==n.b?b(c,p):1===n.d||k?.advancedOptions?.checkLevel==="deepAnalysis"?(await i.load(),window.fetch(c,p)):b(c,p)}}({protect:a})})({ protect: [{"path":"/chat/api/vm/actions/run-pipeline","method":"POST","advancedOptions":{"checkLevel":"deepAnalysis"}},{"path":"/chat/api/chat","method":"POST"},{"path":"/chat/api/vm/actions/*","method":"POST"},{"path":"*/chat/api/vm/actions/*","method":"POST"}] });45:o158,17:["$","html",null,{"lang":"en","suppressHydrationWarning":true,"children":[["$","head",null,{"children":[["$","meta",null,{"name":"ahrefs-site-verification","content":"e2ef51ac3cec223624a89ee7790eda482d23374870bff86fe0e0c599b8de4b51"}],["$","script",null,{"dangerouslySetInnerHTML":{"__html":"$99"}}],"$L9a","$L9b","$L9c","$L9d"]}],"$L9e"]}] 45:o1000,9f:"GeistThemeScript" a0:I[943185,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"$9f"] a1:I[600033,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"AppStoreMetaTag"] a2:I[943185,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"GeistProvider"] a3:I[818362,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"LocaleProvider"] a4:I[841245,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"MotionConfig"] a5:"AtomicContextSWRProvider" a6:I[850359,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$81","$82","$83","$7e","$84","$85","$7f","$86","$87","$88","$89","$8a","$7d"],"$a5"] a7:"GlobalPromiseContextProvider" a8:I[850359,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$81","$82","$83","$7e","$84","$85","$7f","$86","$87","$88","$89","$8a","$7d"],"$a7"] ab:I[827887,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"JotaiProvider"] ac:"ServerQuerySWRRuntimeProvider" ad:I[74757,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"$ac"] af:I[815349,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"CleanupStorage"] b0:I[470669,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"Analytics"] b1:I[191173,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"SpeedInsights"] b2:I[15279,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"SessionManager"] b3:"VercelianAppFlowMigrator" b4:I[23825,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"$b3"] b5:I[108762,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"TrackInfo"] b6:I[578386,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"PageViewTracker"] b7:I[356301,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"AutoCapture"] 9a:["$","$La045:o3f9,",null,{"storageKey":"theme"}] 9b:["$","$3e",null,{"children":["$","$La1",null,{}]}] 9c:["$","meta",null,{"name":"slack-app-id","content":"A09PS08K5R8"}] 9d:["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"[{\"@context\":\"https://schema.org\",\"@type\":\"Organization\",\"name\":\"Vercel\",\"url\":\"https://vercel.com\",\"logo\":\"https://assets.vercel.com/image/upload/front/favicon/vercel/favicon.ico\",\"sameAs\":[\"https://x.com/vercel\",\"https://x.com/v0\",\"https://github.com/vercel\",\"https://www.linkedin.com/company/vercel\",\"https://www.linkedin.com/company/v0dev\"]},{\"@context\":\"https://schema.org\",\"@type\":\"WebApplication\",\"name\":\"v0\",\"url\":\"https://v0.app\",\"description\":\"Your collaborative AI assistant to design, iterate, and scale full-stack applications for the web.\",\"applicationCategory\":[\"DeveloperApplication\",\"DesignApplication\"],\"operatingSystem\":\"All\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Vercel\"}}]"}}] 45:o949,9e:["$","body",null,{"className":"font-sans bg-v0-background-200 text-v0-gray-1000 antialiased kSVEZa_variable yCrHjW_variable hGs1mq_variable","children":[["$","$La2",null,{"storageKey":"theme","withScript":false,"children":["$","$La3",null,{"locale":"en","children":["$","$La4",null,{"reducedMotion":"user","children":["$","$La6",null,{"routes":{"scoped":{"scopeUserDetails":{"path":"/api/chat/scoped/user","method":"GET"},"team":{"path":"/api/chat/scoped/team","method":"GET"},"vercelProjectsFavorites":{"path":"/api/chat/scoped/vercel-projects/favorites","method":"GET"},"chats":{"path":"/api/chat/scoped/chats","method":"GET"},"paginatedChats":{"path":"/api/chat/scoped/get-paginated-chats","method":"GET"},"designSystems":{"path":"/api/chat/scoped/design-systems-with-registry/list","method":"GET"},"sidebarProjectGroups":{"path":"/api/chat/scoped/sidebar-project-groups","method":"GET"},"sidebarDrafts":{"path":"/api/v2/internal/chats/sidebar-drafts","method":"GET"}},"chat":{"attributes":{"path":"/api/chat/chat/attributes","method":"GET"},"externalMeta":{"path":"/api/chat/chat/latest-external-meta","method":"GET"},"latest":{"path":"/api/chat/chat/latest","method":"GET"},"template":{"path":"/api/chat/chat/template","method":"GET"},"messages":{"path":"/api/chat/chat/messages","method":"GET"},"messagesRange":{"path":"/api/chat/chat/messages/range","method":"GET"},"gitStatus":{"path":"/api/git/status","method":"GET"}},"library":{"chatsList":{"path":"/api/chat/library/chats/list","method":"GET"},"archivedChatsList":{"path":"/api/chat/library/chats/archived","method":"GET"},"projectsList":{"path":"/api/chat/library/projects/list","method":"GET"},"filters":{"path":"/api/chat/library/filters","method":"GET"}},"project":{},"global":{"dailyModelUsage":{"path":"/api/chat/global/daily-model-usage","method":"GET"},"freeFixWithV0Usage":{"path":"/api/chat/global/free-fix-with-v0-usage","method":"GET"}}},"children":["$","$La8",null,{"params":null,"promises":{"dailyModelUsage":"$@a9","freeFixWithV0Usage":"$@aa"},"children":[["$","$Lab",null,{"children":["$","$Lad",null,{"children":"$Lae"}]}],["$","$Laf",null,{}]]}]}]}]}]}],["$","$Lb0",null,{}],["$","$Lb1",null,{"endpoint":"https://v0sdk.com/_vercel/speed-insights/vitals"}],["$","$3e",null,{"children":["$","$Lb2",null,{}]}],["$","$Lb4",null,{}],["$","$Lb5",null,{}],["$","$Lb6",null,{}],["$","$Lb7",null,{}]]}] 45:o90,3b:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1, maximum-scale=1"}]] 45:oe,40:T8,variants45:o1000,b8:"HydrateDurableAtoms" b9:I[783749,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"$b8"] ba:I[359783,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"DataProvider"] bb:I[32170,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"UserProvider"] bd:"AnimatedIconProvider" be:I[908887,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"$bd"] bf:I[30570,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"PortalProvider"] c0:"SnowflakePublishProvider" c1:I[966820,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"$c0"] c2:"UserInputProvider" c3:I[472914,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"$c2"] c4:I[69221,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"CmdkProvider"] c5:"VirtualMachineUIStateProvider" c6:I[319228,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"$c5"] c7:"DeployedPreviewIframeRefProvider" c8:I[166890,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"$c7"] c9:"PreviewSourceUIStateProvider" ca:I[197843,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"$c9"] cb:I[367078,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"LoaderProvider"] cc:"PromptFormUIProvider" cd:I[595358,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"$cc"] ce:I[242759,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"FlagsProvider"] d0:I[723704,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"NuqsAdapter"] d1:"ChatTabsProvider" d2:I[568561,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"$d1"] d3:"PersonalScopeMigrationAnnouncementProvider" d4:I[206559,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"$d3"] d6:"AnnouncementVisibilityProvider" d7:I[878519,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","45:o462,$6b","$6c","$6d","$6e","$6f"],"$d6"] da:I[561588,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"Toaster"] db:I[407562,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"Toaster"] dc:"SuspendingDialogs" dd:I[840793,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"$dc"] de:I[323194,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"SignInDialog"] df:I[279070,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f"],"ConsentBanner"] 45:o8ad,ae:["$","$Lb9",null,{"serverData":{"chat":null,"scoped":null,"root":{"root":{"sidebarCollapsed":false,"sidebarPreferenceSet":false,"sidebarWidth":250,"lastUpdated":0,"modelConfiguration":{"fast":false,"modelId":"v0-max","thinking":false,"thinkingEffort":null,"imageGenerations":false},"modelDisplayPreference":null,"lastModelPreference":null,"toolConfiguration":{"webSearch":true,"generateImages":true,"vercelProjectId":null,"vercelProjectName":null,"vercelProjectBranch":null,"vercelProjectGitOrg":null,"vercelProjectGitRepo":null,"customInstructionIds":[],"mcpServerIds":[],"marketplaceMcpIds":[],"autoAllowMcpTools":false},"shouldShowUpgrade":false,"chatMobilePanel":"input","chatPanelLayout":[{"id":"input","ratio":0.205,"visible":true},{"id":"output","ratio":0.795,"visible":true}],"dismissedFeatureDialogs":{},"dismissedConnectRepoCard":false,"permissionsModeV2":null}}},"children":["$","$Lba",null,{"children":["$","$Lbb",null,{"expectUser":false,"userPromise":"$@bc","children":["$","$Lbe",null,{"children":["$","$Lbf",null,{"children":["$","$Lc1",null,{"children":["$","$Lc3",null,{"children":["$","$Lc4",null,{"children":["$","$Lc6",null,{"children":["$","$Lc8",null,{"children":["$","$Lca",null,{"children":["$","$Lcb",null,{"children":["$","$Lcd",null,{"children":["$","$Lce",null,{"promise":"$@cf","middlewareFlags":[],"children":["$","$Ld0",null,{"children":["$","$Ld2",null,{"children":["$","$Ld4",null,{"destinationTeamIdPromise":"$@d5","children":["$","$Ld7",null,{"visiblePromise":"$@d8","children":["$","div",null,{"className":"max-h-screen-patched min-h-screen-patched flex w-full flex-col overflow-auto bg-v0-background-200","vaul-drawer-wrapper":"","children":[["$","$3e",null,{"fallback":null,"children":"$Ld9"}],["$","$Lda",null,{}],["$","$Ldb",null,{}],["$","$3e",null,{"fallback":null,"children":["$","$Ldd",null,{}]}],["$","$Lde",null,{}],["$","$L4",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}],["$","$Ldf",null,{}]]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}] 45:o105,98:["$","$L90",null,{"className":"$92","children":["$4f:props:children:1:props:notFound:0:props:fallback:props:children:0",["$","$L96",null,{"description":"This chat was deleted, made private, or no longer exists.","title":"Chat Not Found","children":null}]]}] 45:o20,bc:"$undefined" d8:true d9:null 45:o81,40:T1,?38:T1,?22:T1,?36:T1,?2c:T1,?41:60 38:T8,variants36:T8,variants1b:T8,variants40:T2,id36:T5,scope2c:T2,id1b:T5,scope36:T2,id45:oe8c,e0:"RouteChatIdProvider" e1:I[903690,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$81","$82","$83","$7e","$84","$85","$7f","$86","$87","$88","$89","$8a","$7d"],"$e0"] e2:"CompletionAttentionProvider" e3:I[607506,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b"],"$e2"] e4:"SidebarUIProvider" e5:I[475961,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b"],"$e4"] e8:"HeaderSlotClientRouter" e9:I[597544,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b"],"$e8"] ea:"/chat-static/_next/static/immutable/chunks/3lpmegmkbxt94.js" eb:I[32459,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$ea"],"default"] ec:I[990009,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b"],"Header"] ed:"RevalidateChatIdSkeletonStyles" ee:I[564011,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b"],"$ed"] ef:I[980088,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b"],"DynamicCMDK"] f0:"PromptQueueSnapshotProvider" f1:I[475641,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$81","$82","$83","$7e","$84","$85","$7f","$86","$87","$88","$89","$8a","$7d"],"$f0"] f4:"ChatPromiseContextProvider" f5:I[850359,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$81","$82","$83","$7e","$84","$85","$7f","$86","$87","$88","$89","$8a","$7d"],"$f4"] fd:I[70040,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$81","$82","$83","$7e","$84","$85","$7f","$86","$87","$88","$89","$8a","$7d"],"GitChatHeader"] fe:I[705838,["$3"],"IconMark"] 8e:null 45:o77d,44:["$","$Le1",null,{"children":["$","$Le3",null,{"children":["$","$Le5",null,{"children":[["$","$3e",null,{"fallback":null,"children":"$@e6"}],["$","$3e",null,{"children":"$Le7"}],false,false,["$","div",null,{"className":"isolate flex min-h-0 flex-1","children":[false,["$","div",null,{"className":"flex min-h-0 min-w-0 flex-1 flex-col","children":[["$","$Le9",null,{"headerSlot":["$","$L4",null,{"parallelRouterKey":"header","error":"$eb","errorStyles":[],"errorScripts":[["$","script","script-0",{"src":"/chat-static/_next/static/immutable/chunks/3lpmegmkbxt94.js","async":true,"nonce":"$undefined"}]],"template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}],"defaultSlot":["$","$Lec",null,{}]}],["$","$L4",null,{"parallelRouterKey":"children","error":"$eb","errorStyles":"$44:props:children:props:children:props:children:4:props:children:1:props:children:0:props:headerSlot:props:errorStyles","errorScripts":"$44:props:children:props:children:props:children:4:props:children:1:props:children:0:props:headerSlot:props:errorScripts","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}],["$","$L4",null,{"parallelRouterKey":"content","error":"$eb","errorStyles":"$44:props:children:props:children:props:children:4:props:children:1:props:children:0:props:headerSlot:props:errorStyles","errorScripts":"$44:props:children:props:children:props:children:4:props:children:1:props:children:0:props:headerSlot:props:errorScripts","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}]]}],false,["$","$3e",null,{"children":["$","$Lee",null,{}]}],["$","$Lef",null,{}]]}]}]}] 45:o447,50:["$","$Lf1",null,{"initial":{"chatId":"YbBjtqkPLom","snapshot":"$@f2"},"children":"$Lf3"}] 8d:["$","$Lf5",null,{"params":{"chatId":"YbBjtqkPLom"},"promises":{"attributes":"$@f6","externalMeta":"$@f7","latest":"$@f8","messagesRange":"$@f9","messages":"$@fa","template":"$@fb","gitStatus":"$@fc"},"children":["$","$Lfd",null,{"chatId":"YbBjtqkPLom"}]}] d5:null cf:{"requested":"vercel-labs","identity":null,"resolution":"anonymous","flags":{"aepe":false,"asse":false,"afre":false,"bvge":false,"ctbe":true,"igm":"gateway.google/gemini-3.1-flash-lite-image","caae":false,"lcw":false,"tbb":false,"spqe":true,"oivs":false,"vmmt":false,"nfd":"","nfde":1,"iedm":true,"inb":true,"stve":true,"ci":true,"smpe":false,"dsie":false,"sie":false,"cvod":false,"dce":false,"tse":false,"lmmo":false,"ubse":true,"dcpps":false,"spu":true,"kps":false,"tfam":false,"evmv":true,"dcv":false,"f5e":true,"f51e":true,"gmpe":true,"impe":false,"gope":false,"g56se":true,"g56spe":true,"g52e":false,"g46e":false,"kk3e":false,"o5e":true,"pwz":true,"shce":false,"shme":false,"idue":false,"tec":false,"dsrr":false,"ftr":null}} 45:o58a,3f:[["$","title","0",{"children":"Approval Gate - v0 by Vercel"}],["$","meta","1",{"name":"description","content":"Start from these files."}],["$","link","2",{"rel":"manifest","href":"/manifest.json","crossOrigin":"$undefined"}],["$","link","3",{"rel":"canonical","href":"https://v0.app/chat/approval-gate-YbBjtqkPLom"}],["$","meta","4",{"property":"og:title","content":"Approval Gate - v0 by Vercel"}],["$","meta","5",{"property":"og:description","content":"Start from these files."}],["$","meta","6",{"property":"og:image","content":"https://v0.app/chat/api/og/YbBjtqkPLom"}],["$","meta","7",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","8",{"name":"twitter:title","content":"Approval Gate - v0 by Vercel"}],["$","meta","9",{"name":"twitter:description","content":"Start from these files."}],["$","meta","10",{"name":"twitter:image","content":"https://v0.app/chat/api/og/YbBjtqkPLom"}],["$","link","11",{"rel":"icon","href":"/assets/icon-light-32x32.png","media":"(prefers-color-scheme: light)","sizes":"32x32","type":"image/png"}],["$","link","12",{"rel":"icon","href":"/assets/icon-dark-32x32.png","media":"(prefers-color-scheme: dark)","sizes":"32x32","type":"image/png"}],["$","link","13",{"rel":"icon","href":"/assets/icon.svg","sizes":"32x32","type":"image/svg+xml"}],["$","link","14",{"rel":"apple-touch-icon","href":"/assets/apple-icon.png","type":"image/png"}],["$","$Lfe","15",{}]] 45:o8,46:null 45:o8ee,106:"ExplicitChatIdProvider" 107:I[903690,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$81","$82","$83","$7e","$84","$85","$7f","$86","$87","$88","$89","$8a","$7d"],"$106"] 108:I[838238,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$81","$82","$83","$7e","$84","$85","$7f","$86","$87","$88","$89","$8a","$7d"],"SWRDataProvider"] 2c:T8,variants2c:T5,scopef6:{"ok":true,"value":{"designSystemId":null,"title":"Approval Gate","privacy":"public","access":1,"isAdmin":false,"isAuthor":false,"ownerId":"team_nO2mCG4W8IxPIeKoSsqwAxxB","tailwindV4Default":true,"nextVersionDefault":16,"nextVersion15Default":false,"forceVMRendering":false,"isNextLiteReadOnly":true,"canWriteToChat":false,"chatCreatedAt":1772051273121,"hasBlock":true,"vercelProject":null,"hasGitConnection":false,"gitBase":null,"gitHead":null,"hasSnowflakeIntegration":false,"chatHasAnySnowflakeIntegration":false,"storageEntityType":null,"storageEntityId":null,"vercelProjectId":"prj_UW1AeADgYUiCatxSngQAqhUyx08g","defaultPreviewPath":null,"agentWorkspace":false,"workspaceRuntime":false}} f7:{"ok":false,"error":{"error":"Unauthorized","statusCode":401,"errorCode":"2"}} f8:{"ok":false,"error":{"error":"51","statusCode":500,"errorCode":"38"}} f9:{"ok":false,"error":{"error":"51","statusCode":500,"errorCode":"38"}} fa:{"ok":false,"error":{"error":"51","statusCode":500,"errorCode":"38"}} fb:{"ok":false,"error":{"error":"Unauthorized","statusCode":401,"errorCode":"2"}} fc:{"ok":false,"error":{"error":"Unauthorized","statusCode":401,"errorCode":"2"}} e6:null 10a:[] 10b:[["b_HNq75LiGG8T",null]] 10c:[["b_HNq75LiGG8T",{"templateVersionId":null,"templateCanonId":null}]] 10d:[["b_HNq75LiGG8T","$D2026-02-25T20:27:53.120Z"]] 10e:[["b_HNq75LiGG8T",false]] 10f:[["b_HNq75LiGG8T","$undefined"]] 110:[["b_HNq75LiGG8T",null]] 111:[["b_HNq75LiGG8T",true]] 112:[["b_HNq75LiGG8T",true]] 113:[] 114:Td531,45:od531,[V0_FILE]typescriptreact:file="app/components/demo.tsx" "use client"; import { useState, useCallback, useRef, useEffect, type ReactNode } from "react"; type WorkflowStatus = "idle" | "waiting" | "approved" | "rejected" | "timeout"; interface WorkflowState { status: WorkflowStatus; runId: string | null; orderId: string; token: string | null; timeout: string; elapsed: number; timeoutMs: number; comment?: string; approvedBy?: string; error?: string; } const initialState: WorkflowState = { status: "idle", runId: null, orderId: "", token: null, timeout: "30s", elapsed: 0, timeoutMs: 30000, }; export function ApprovalDemo() { const [state, setState] = useState(initialState); const [orderId, setOrderId] = useState("order_123"); const [approvedBy] = useState("manager@example.com"); const pollingRef = useRef | null>(null); const abortRef = useRef(null); const startButtonRef = useRef(null); const stopPolling = useCallback(() => { if (pollingRef.current) { clearInterval(pollingRef.current); pollingRef.current = null; } }, []); const getAbortSignal = useCallback((): AbortSignal => { if (!abortRef.current || abortRef.current.signal.aborted) { abortRef.current = new AbortController(); } return abortRef.current.signal; }, []); useEffect(() => { return () => { stopPolling(); abortRef.current?.abort(); abortRef.current = null; }; }, [stopPolling]); const pollStatus = useCallback( (token: string) => { stopPolling(); pollingRef.current = setInterval(async () => { try { const signal = getAbortSignal(); const res = await fetch( `/api/mock/approve?token=${encodeURIComponent(token)}`, { signal } ); if (signal.aborted || !res.ok) return; const data = await res.json(); if (signal.aborted) return; setState((prev) => ({ ...prev, status: data.status, elapsed: data.elapsed, comment: data.comment, approvedBy: data.approvedBy, })); if (data.status !== "waiting") { stopPolling(); } } catch (error) { if (error instanceof Error && error.name === "AbortError") { return; } // ignore polling errors } }, 500); }, [getAbortSignal, stopPolling] ); const handleStart = async () => { if (!orderId.trim()) return; setState((prev) => ({ ...prev, error: undefined })); stopPolling(); abortRef.current?.abort(); abortRef.current = null; const signal = getAbortSignal(); try { const res = await fetch("/api/mock/start", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ orderId, timeout: state.timeout }), signal, }); if (signal.aborted) return; const data = await res.json(); if (signal.aborted) return; if (!res.ok) { if (signal.aborted) return; setState((prev) => ({ ...prev, error: data.error })); return; } if (signal.aborted) return; setState({ status: "waiting", runId: data.runId, orderId: data.orderId, token: data.approvalToken, timeout: state.timeout, elapsed: 0, timeoutMs: parseTimeoutToMs(state.timeout), }); if (signal.aborted) { return; } pollStatus(data.approvalToken); } catch (error) { if (error instanceof Error && error.name === "AbortError") { return; } setState((prev) => ({ ...prev, error: "Failed to start workflow", })); } }; const handleDecision = async (approved: boolean) => { if (!state.token) return; const signal = getAbortSignal(); try { const res = await fetch("/api/mock/approve", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ token: state.token, approved, approvedBy: approvedBy || undefined, }), signal, }); if (signal.aborted) return; const data = await res.json(); if (signal.aborted) return; if (!res.ok) { if (signal.aborted) return; setState((prev) => ({ ...prev, error: data.error })); return; } stopPolling(); if (signal.aborted) return; setState((prev) => ({ ...prev, status: approved ? "approved" : "rejected", approvedBy: approvedBy || undefined, })); } catch (error) { if (error instanceof Error && error.name === "AbortError") { return; } setState((prev) => ({ ...prev, error: "Failed to send decision", })); } }; const handleReset = () => { stopPolling(); abortRef.current?.abort(); abortRef.current = null; setState(initialState); setTimeout(() => { startButtonRef.current?.focus(); }, 0); }; const isIdle = state.status === "idle"; const isWaiting = state.status === "waiting"; const isDone = state.status === "approved" || state.status === "rejected" || state.status === "timeout"; const raceWinner = state.status === "timeout" ? "sleep(timeout)" : "approvalHook(token)"; const raceLoser = state.status === "timeout" ? "approvalHook(token)" : "sleep(timeout)"; return (

{state.error && (

{state.error}

)} {/* Step 1: Submit Order */} {isIdle ? (

Order ID setOrderId(e.target.value)} placeholder="order_123" className="w-full bg-background-100 border border-gray-400 rounded-md px-3 py-2 text-sm font-mono text-gray-1000 placeholder:text-gray-500 focus:border-gray-300 focus:outline-none transition-colors disabled:opacity-50" />

Timeout

) : (

Order{" "} {state.orderId}{" "} submitted for approval.

)} {/* Step 2: Workflow Suspends */} {isWaiting ? ( ) : isDone ? (

Workflow resumed because{" "} {raceWinner}{" "} won Promise.race().

{raceLoser}{" "} lost and was ignored. Final status:{" "} {state.status}.

) : (

The workflow will suspend here, using zero compute while it waits for a signal.

)} {/* Step 3: Approver Clicks the Link */} {isWaiting ? (

) : state.status === "approved" || state.status === "rejected" || state.status === "timeout" ? ( ) : (

An approval email will be sent with a link containing the hook token.

)} {isDone && ( )}

); } // --- Step Card --- type StepState = "active" | "done" | "default" | "pending"; function StepCard({ step, title, state, children, }: { step: number; title: string; state: StepState; children: ReactNode; }) { return (

{/* Badge + title sitting on the top border */}

{title}

{children}

); } // --- Sub-components --- function WorkflowStatusPanel({ elapsed, timeoutMs, orderId, }: { elapsed: number; timeoutMs: number; orderId: string; }) { const progress = Math.min((elapsed / timeoutMs) * 100, 100); const remaining = Math.max(0, Math.ceil((timeoutMs - elapsed) / 1000)); return (

Order {orderId} · {remaining}s until sleep(timeout) can win

First branch to resolve wins and resumes the workflow. The other branch is ignored.

); } function MockApprovalEmail({ orderId, token, approvedBy, onDecision, }: { orderId: string; token: string; approvedBy: string; onDecision: (approved: boolean) => void; }) { const baseUrl = "https://acme.com/api/approve"; return (

{/* Email chrome */}

From: orders@acme.com

To: {approvedBy}

Subject: Approval required for {orderId}

{/* Email body — lighter background to feel like an email */}

Hi {approvedBy.split("@")[0]},

Order {orderId}{" "} ($2,340.00) has been submitted and needs your approval before it can be fulfilled.

Click here to approve:{" "}

Click here to reject:{" "}

Thanks,
The Acme Orders Team

); } function HookExplainer({ token }: { token: string }) { const baseUrl = "https://acme.com/api/approve"; return (

Notice the hook token {token}{" "} embedded in each URL. That's how the server knows which workflow to resume. Any system that can construct this token — a CLI script, a Slack bot, a cron job — can wake the workflow.

{`curl -X POST ${baseUrl} \\
  -H "Content-Type: application/json" \\
  -d '{"token":"${token}","approved":true}'`}

); } function ResultDisplay({ status, orderId, comment, approvedBy, }: { status: "approved" | "rejected" | "timeout"; orderId: string; comment?: string; approvedBy?: string; }) { const config = { approved: { label: "Approved", bg: "bg-green-700/10", border: "border-green-700/40", text: "text-green-700", raceSummary: "Race winner: approvalHook(token). sleep(timeout) was ignored.", icon: ( ), }, rejected: { label: "Rejected", bg: "bg-red-700/10", border: "border-red-700/40", text: "text-red-700", raceSummary: "Race winner: approvalHook(token). sleep(timeout) was ignored.", icon: ( ), }, timeout: { label: "Timed Out", bg: "bg-amber-700/10", border: "border-amber-700/40", text: "text-amber-700", raceSummary: "Race winner: sleep(timeout). approvalHook(token) was ignored.", icon: ( ), }, }; const c = config[status]; return (

{c.icon}

Order {orderId}: {c.label}

{c.raceSummary}

{status === "timeout" && (

No approval arrived before the deadline, so the order was automatically cancelled.

)} {comment && (

“{comment}”

)} {approvedBy && (

By {approvedBy}

)}

); } function parseTimeoutToMs(timeout: string): number { const match = timeout.match(/^(\d+)(ms|s|m|h|d)$/); if (!match) return 30000; const value = parseInt(match[1], 10); switch (match[2]) { case "ms": return value; case "s": return value * 1000; case "m": return value * 60 * 1000; case "h": return value * 60 * 60 * 1000; case "d": return value * 24 * 60 * 60 * 1000; default: return 30000; } } [V0_FILE]typescriptreact:file="app/components/code-block.tsx" "use client"; import { Highlight, type PrismTheme } from "prism-react-renderer"; // Empty theme — all token colors come from CSS classes const emptyTheme: PrismTheme = { plain: {}, styles: [], }; function parseHighlightLines(highlight?: string): Set { if (!highlight) return new Set(); const lines = new Set(); for (const part of highlight.split(",")) { const trimmed = part.trim(); if (trimmed.includes("-")) { const [start, end] = trimmed.split("-").map(Number); for (let i = start; i <= end; i++) lines.add(i); } else { lines.add(Number(trimmed)); } } return lines; } export function CodeBlock({ code, language = "tsx", highlight, }: { code: string; language?: string; highlight?: string; }) { const highlightedLines = parseHighlightLines(highlight); return ( {({ className, style, tokens, getLineProps, getTokenProps }) => (

          
            {tokens.map((line, i) => {
              const lineNumber = i + 1;
              const isHighlighted = highlightedLines.has(lineNumber);
              const lineProps = getLineProps({ line });
              return (
                
                  {line.map((token, key) => (
                    
                  ))}
                
              );
            })}

)} ); } [V0_FILE]typescriptreact:file="app/layout.tsx" import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"], }); const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"], }); export const metadata: Metadata = { title: "Approval Gate \u2013 Workflow DevKit Example", description: "Demonstrates the \u201CSignal + timer\u201D pattern with Workflow DevKit", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( Skip to main content {children} ); } [V0_FILE]typescript:file="app/api/mock/start/route.ts" import { createApiErrorResponse, createApiSuccessResponse } from "../api"; // In-memory store for mock workflow runs const runs = globalThis as unknown as { __mockApprovalRuns?: Map< string, { runId: string; orderId: string; timeout: number; status: "waiting" | "approved" | "rejected" | "timeout"; createdAt: number; comment?: string; approvedBy?: string; } >; }; export function getRunStore() { if (!runs.__mockApprovalRuns) { runs.__mockApprovalRuns = new Map(); } return runs.__mockApprovalRuns; } export async function POST(request: Request) { let body: unknown; try { body = await request.json(); } catch { return createApiErrorResponse( { code: "INVALID_REQUEST", message: "Invalid JSON body", }, { status: 400 } ); } const { orderId, timeout = "30s" } = (body ?? {}) as { orderId?: unknown; timeout?: unknown; }; if (typeof orderId !== "string" || orderId.trim().length === 0) { return createApiErrorResponse( { code: "INVALID_REQUEST", message: "orderId is required", }, { status: 400 } ); } const normalizedOrderId = orderId.trim(); const normalizedTimeout = typeof timeout === "string" ? timeout : "30s"; const store = getRunStore(); const runId = `mock_run_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`; const token = `order_approval:${normalizedOrderId}`; // Parse timeout string to milliseconds const timeoutMs = parseTimeout(normalizedTimeout); store.set(token, { runId, orderId: normalizedOrderId, timeout: timeoutMs, status: "waiting", createdAt: Date.now(), }); // Set up auto-timeout — check runId so a restarted demo // with the same token doesn't get timed out by the old callback setTimeout(() => { const run = store.get(token); if (run && run.status === "waiting" && run.runId === runId) { run.status = "timeout"; } }, timeoutMs); return createApiSuccessResponse({ message: "Approval workflow started (mock)", runId, orderId: normalizedOrderId, timeout: normalizedTimeout, approvalToken: token, }); } function parseTimeout(timeout: string): number { const match = timeout.match(/^(\d+)(ms|s|m|h|d)$/); if (!match) return 30000; const value = parseInt(match[1], 10); switch (match[2]) { case "ms": return value; case "s": return value * 1000; case "m": return value * 60 * 1000; case "h": return value * 60 * 60 * 1000; case "d": return value * 24 * 60 * 60 * 1000; default: return 30000; } } [V0_FILE]typescript:file="app/api/mock/api.ts" import { NextResponse } from "next/server"; type ApiError = { code: string; message: string; }; export function createApiSuccessResponse>( fields: T, init?: ResponseInit ) { return NextResponse.json( { ok: true, ...fields, }, init ); } export function createApiErrorResponse(error: ApiError, init?: ResponseInit) { return NextResponse.json( { ok: false, error, }, init ); } [V0_FILE]typescript:file="app/api/mock/approve/route.ts" import { createApiErrorResponse, createApiSuccessResponse } from "../api"; // Import the shared run store const runs = globalThis as unknown as { __mockApprovalRuns?: Map< string, { runId: string; orderId: string; timeout: number; status: "waiting" | "approved" | "rejected" | "timeout"; createdAt: number; comment?: string; approvedBy?: string; } >; }; function getRunStore() { if (!runs.__mockApprovalRuns) { runs.__mockApprovalRuns = new Map(); } return runs.__mockApprovalRuns; } export async function POST(request: Request) { let body: unknown; try { body = await request.json(); } catch { return createApiErrorResponse( { code: "INVALID_JSON_BODY", message: "Invalid JSON body", }, { status: 400 } ); } const { token, approved, comment, approvedBy } = (body ?? {}) as { token?: unknown; approved?: unknown; comment?: unknown; approvedBy?: unknown; }; if (typeof token !== "string" || token.trim().length === 0) { return createApiErrorResponse( { code: "MISSING_TOKEN", message: "token is required", }, { status: 400 } ); } if (typeof approved !== "boolean") { return createApiErrorResponse( { code: "INVALID_APPROVAL_DECISION", message: "approved must be a boolean", }, { status: 400 } ); } const store = getRunStore(); const normalizedToken = token.trim(); const run = store.get(normalizedToken); if (!run) { return createApiErrorResponse( { code: "RUN_NOT_FOUND", message: "No workflow found for this token", }, { status: 404 } ); } if (run.status !== "waiting") { return createApiSuccessResponse({ message: `Workflow already resolved with status: ${run.status}`, runId: run.runId, token: normalizedToken, status: run.status, approved: run.status === "approved", comment: run.comment, approvedBy: run.approvedBy, alreadyResolved: true, }); } run.status = approved ? "approved" : "rejected"; run.comment = typeof comment === "string" ? comment : undefined; run.approvedBy = typeof approvedBy === "string" ? approvedBy : undefined; return createApiSuccessResponse({ message: approved ? "Order approved (mock)" : "Order rejected (mock)", runId: run.runId, token: normalizedToken, status: run.status, approved, comment: run.comment, approvedBy: run.approvedBy, }); } export async function GET(request: Request) { const { searchParams } = new URL(request.url); const token = searchParams.get("token"); if (!token) { return createApiErrorResponse( { code: "MISSING_TOKEN", message: "token query parameter is required", }, { status: 400 } ); } const store = getRunStore(); const run = store.get(token); if (!run) { return createApiErrorResponse( { code: "RUN_NOT_FOUND", message: "No workflow found for this token", }, { status: 404 } ); } // Check if it should have timed out const elapsed = Date.now() - run.createdAt; if (run.status === "waiting" && elapsed > run.timeout) { run.status = "timeout"; } return createApiSuccessResponse({ runId: run.runId, orderId: run.orderId, status: run.status, elapsed, timeout: run.timeout, comment: run.comment, approvedBy: run.approvedBy, }); } [V0_FILE]typescript:file="app/api/start/route.ts" import { start } from "workflow/api"; import { approvalGate } from "@/workflows/approval-gate"; import type { StringValue } from "ms"; const NO_STORE_HEADERS = { "Cache-Control": "no-store", } as const; function createErrorResponse(status: number, code: string, message: string) { return Response.json( { ok: false, error: { code, message, }, }, { status, headers: NO_STORE_HEADERS, } ); } export async function POST(request: Request) { let body: Record; try { body = await request.json(); } catch { return createErrorResponse(400, "INVALID_JSON", "Invalid JSON body"); } const orderId = body.orderId; const timeout = body.timeout; if (typeof orderId !== "string" || orderId.trim().length === 0) { return createErrorResponse(400, "MISSING_ORDER_ID", "orderId is required"); } const normalizedOrderId = orderId.trim(); const normalizedTimeout: StringValue = typeof timeout === "string" ? (timeout as StringValue) : "30s"; let run: Awaited>; try { // Start the approval gate workflow run = await start(approvalGate, [normalizedOrderId, normalizedTimeout]); } catch (error) { const message = error instanceof Error ? error.message : "Failed to start workflow"; return createErrorResponse(500, "WORKFLOW_START_FAILED", message); } console.log(`Started approval gate workflow for order ${normalizedOrderId}`); console.log(`Run ID: ${run.runId}`); console.log(`Approval token: order_approval:${normalizedOrderId}`); return Response.json({ ok: true, message: "Approval workflow started", runId: run.runId, orderId: normalizedOrderId, timeout: normalizedTimeout, approvalToken: `order_approval:${normalizedOrderId}`, }); } [V0_FILE]typescript:file="app/api/approve/route.ts" import { orderApprovalHook, type ApprovalPayload } from "@/workflows/approval-gate"; const NO_STORE_HEADERS = { "Cache-Control": "no-store", } as const; function createErrorResponse(status: number, code: string, message: string) { return Response.json( { ok: false, error: { code, message, }, }, { status, headers: NO_STORE_HEADERS, } ); } export async function POST(request: Request) { let body: Record; try { body = await request.json(); } catch { return createErrorResponse(400, "INVALID_JSON", "Invalid JSON body"); } const { token, approved, comment, approvedBy } = body; if (typeof token !== "string" || token.trim().length === 0) { return createErrorResponse(400, "MISSING_TOKEN", "token is required"); } if (typeof approved !== "boolean") { return createErrorResponse( 400, "INVALID_APPROVAL_DECISION", "approved must be a boolean" ); } const normalizedToken = token.trim(); const payload: ApprovalPayload = { approved, comment: typeof comment === "string" ? comment : undefined, approvedBy: typeof approvedBy === "string" ? approvedBy : undefined, }; let result: Awaited>; try { // Resume the hook with the approval decision result = await orderApprovalHook.resume(normalizedToken, payload); } catch (error) { const message = error instanceof Error ? error.message : "Failed to resume hook"; return createErrorResponse(500, "HOOK_RESUME_FAILED", message); } if (!result) { return createErrorResponse( 404, "HOOK_NOT_FOUND", "Hook not found or already resolved" ); } console.log(`Approval sent for token: ${normalizedToken}`); console.log(`Decision: ${approved ? "APPROVED" : "REJECTED"}`); return Response.json({ ok: true, message: approved ? "Order approved" : "Order rejected", runId: result.runId, token: normalizedToken, approved, comment: payload.comment, approvedBy: payload.approvedBy, }); } [V0_FILE]typescriptreact:file="app/page.tsx" import { ApprovalDemo } from "./components/demo"; import { CodeBlock } from "./components/code-block"; const workflowCode = `import { defineHook, sleep } from "workflow"; const orderApprovalHook = defineHook(); export async function approvalGate( orderId: string, timeout: string = "24h" ) { "use workflow"; // Step 1 — sends the email you saw above. await requestApproval(orderId); // This token is embedded in every URL in that email. const hook = orderApprovalHook.create({ token: \`order_approval:\${orderId}\`, }); // Step 2 — the workflow pauses here. That's the spinner. // Clicking a link in the email resolves the hook. // If nobody clicks, sleep() wins the race. const result = await Promise.race([ hook.then((payload) => ({ type: "approval", payload })), sleep(timeout).then(() => ({ type: "timeout", payload: null })), ]); if (result.type === "timeout") { await cancelOrder(orderId, "Approval timed out"); return { orderId, status: "timeout" }; } // Step 3 — the signal arrived. Fulfill or cancel. const { approved, comment } = result.payload!; if (approved) await fulfillOrder(orderId); else await cancelOrder(orderId, comment); return { orderId, status: approved ? "approved" : "rejected" }; } // Each step is cached and retryable. async function requestApproval(orderId: string) { "use step"; await sendEmail({ to: approver, token: \`order_approval:\${orderId}\` }); } async function fulfillOrder(orderId: string) { "use step"; await processPayment(orderId); await shipItems(orderId); } async function cancelOrder(orderId: string, reason: string) { "use step"; await releaseInventory(orderId); await notifyCustomer(orderId, reason); }`; export default function Home() { return (

Workflow DevKit Example

Approval Gate

Your workflow needs a human to say {"\u201C"}yes.{"\u201D"} It pauses durably until a signal arrives. No polling, no cron, no database. One Promise.race().

How It Works

Order comes in

The workflow starts and sends a notification with a deterministic token {"\u2014"}{" "} order_approval:{"{"}orderId{"}"} . Put it in an email, wire it to a Slack action, call it from a CLI. If you know the order ID, you know the token.
Approval vs timeout race starts

One{" "} Promise.race() {" "}{"\u2014"} two durable branches run in parallel: approval hook vs timeout timer. The hook resolves when someone approves,{" "} sleep("24h") {" "}resolves after 24 hours. Whichever resolves first wins. The losing branch is discarded for this run.
Winner locks the outcome

If approval arrives first, the workflow resumes and fulfills or rejects. If timeout fires first, it cancels as timed out. A late approval after timeout will not change the result {"\u2014"} and a timeout firing after approval is ignored too.

Try It

Submit an order, watch the workflow pause, then send the signal {"\u2014"} click a link or copy the curl command.

Why Hooks

No polling, no cron, no database {"\u2013"} The workflow doesn't know who or what will resume it. Any system that can POST with the token works.
Pauses durably {"\u2013"} The workflow suspends with zero compute. It can wait for seconds or weeks. The sleep survives deploys, restarts, everything.
Deterministic tokens {"\u2013"} Stable across restarts. Derived from your data (e.g. order ID), so external systems can construct them without storing state.
Typed payloads {"\u2013"} The data sent back to the workflow is typed end-to-end with{" "} defineHook<T>() .

The Code

workflows/approval-gate.ts

); } [V0_FILE]css:file="app/globals.css" @import "tailwindcss"; @theme { --color-background-100: #0a0a0a; --color-background-200: #171717; --color-gray-100: #1a1a1a; --color-gray-200: #1f1f1f; --color-gray-300: #292929; --color-gray-400: #737373; --color-gray-500: #525252; --color-gray-600: #404040; --color-gray-700: #262626; --color-gray-800: #171717; --color-gray-900: #a1a1a1; --color-gray-1000: #ededed; --color-blue-700: #0070F3; --color-red-700: #E5484D; --color-amber-700: #FFB224; --color-green-700: #46A758; --color-violet-700: #8B5CF6; --color-cyan-700: #06B6D4; --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); } body { background: #0a0a0a; color: #ededed; font-family: var(--font-sans), -apple-system, BlinkMacSystemFont, sans-serif; } /* Prism token colors — Geist dark-mode palette Extracted from vercel.com/geist/code-block (dark theme) */ .token.keyword, .token.keyword.control-flow { color: #f75f8f; } /* pink — keywords */ .token.plain, .token.parameter, .token.punctuation, .token.plain-text, .token.property-access, .token.operator, .token.tag.punctuation { color: #ededed; } /* gray-1000 — plain text */ .token.function, .token.function.maybe-class-name { color: #bf7af0; } /* purple — functions */ .token.tag { color: #62c073; } /* green — JSX/HTML tags */ .token.literal-property.property { color: #ff6166; } /* red — properties */ .token.string, .token.boolean { color: #62c073; } /* green — strings, booleans */ .token.comment { color: #a1a1a1; } /* gray-900 — comments */ .token.class-name { color: #52a8ff; } /* blue — types */ .token.number { color: #62c073; } /* green — numbers */ .token.attr-name { color: #ff6166; } /* red — attribute names */ .token.attr-value { color: #62c073; } /* green — attribute values */ .token.builtin { color: #52a8ff; } /* blue — builtins */ .token.template-string { color: #62c073; } /* green — template literals */ .token.interpolation { color: #ededed; } /* gray-1000 — interpolation */ [V0_FILE]javascript:file="postcss.config.mjs" export default { plugins: { "@tailwindcss/postcss": {}, }, }; [V0_FILE]typescript:file="workflows/approval-gate.ts" import { defineHook, sleep } from "workflow"; import type { StringValue } from "ms"; // Define the approval payload type export interface ApprovalPayload { approved: boolean; comment?: string; approvedBy?: string; } // Define the hook for type-safe approval handling export const orderApprovalHook = defineHook(); // Result type for the workflow export interface ApprovalResult { orderId: string; status: "approved" | "rejected" | "timeout"; comment?: string; approvedBy?: string; } /** * Approval Gate Workflow * * Demonstrates the "Signal + timer" pattern: * - Creates a deterministic hook token for external systems to resume * - Uses Promise.race to implement timeout behavior * - Waits for human approval or times out after specified duration */ export async function approvalGate( orderId: string, timeout: StringValue = "24h" ): Promise { "use workflow"; // Request approval (e.g., send email, create ticket, notify Slack) await requestApproval(orderId); // Create hook with deterministic token based on orderId // This allows external systems to construct the token and resume the workflow const hook = orderApprovalHook.create({ token: `order_approval:${orderId}`, }); console.log(`[Order ${orderId}] Waiting for approval with token: ${hook.token}`); console.log(`[Order ${orderId}] Timeout set to: ${timeout}`); // Race between approval hook and timeout // Signal + timer pattern: race between hook and timeout const result = await Promise.race([ // Wait for external approval via hook hook.then((payload) => ({ type: "approval" as const, payload, })), // Timeout after specified duration sleep(timeout).then(() => ({ type: "timeout" as const, payload: null, })), ]); if (result.type === "timeout") { // Handle timeout - order was not approved in time console.log(`[Order ${orderId}] Approval timed out after ${timeout}`); await cancelOrder(orderId, "Approval timed out"); return { orderId, status: "timeout", }; } // Handle approval response const { approved, comment, approvedBy } = result.payload!; if (approved) { console.log(`[Order ${orderId}] Approved by ${approvedBy || "unknown"}`); await fulfillOrder(orderId); return { orderId, status: "approved", comment, approvedBy, }; } else { console.log(`[Order ${orderId}] Rejected by ${approvedBy || "unknown"}`); await cancelOrder(orderId, comment || "Rejected by approver"); return { orderId, status: "rejected", comment, approvedBy, }; } } /** * Step: Request approval from external system * In a real app, this might send an email, create a ticket, or notify Slack */ async function requestApproval(orderId: string): Promise { "use step"; console.log(`[Order ${orderId}] Sending approval request...`); // Simulate sending approval request // In production, you might: // - Send an email with approve/reject links containing the token // - Create a ticket in a ticketing system // - Post to Slack with action buttons // - Call an external approval API console.log(`[Order ${orderId}] Approval request sent`); console.log(`[Order ${orderId}] Token: order_approval:${orderId}`); } /** * Step: Fulfill the order after approval */ async function fulfillOrder(orderId: string): Promise { "use step"; console.log(`[Order ${orderId}] Fulfilling order...`); // Simulate order fulfillment // In production: process payment, ship items, etc. console.log(`[Order ${orderId}] Order fulfilled successfully`); } /** * Step: Cancel the order (on rejection or timeout) */ async function cancelOrder(orderId: string, reason: string): Promise { "use step"; console.log(`[Order ${orderId}] Cancelling order...`); console.log(`[Order ${orderId}] Reason: ${reason}`); // Simulate order cancellation // In production: release inventory, refund if needed, notify customer console.log(`[Order ${orderId}] Order cancelled`); } [V0_FILE]json:file="package.json" { "name": "approval-gate", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "next": "16.0.10", "prism-react-renderer": "^2.4.1", "react": "19.2.3", "react-dom": "19.2.3", "workflow": "4.1.0-beta.53" }, "devDependencies": { "@tailwindcss/postcss": "^4", "@types/ms": "^2.1.0", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", "ms": "^2.1.3", "tailwindcss": "^4", "typescript": "^5" } } [V0_FILE]json:file="tsconfig.json" { "compilerOptions": { "target": "ES2017", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "react-jsx", "incremental": true, "plugins": [ { "name": "next" }, { "name": "workflow" } ], "paths": { "@/*": ["./*"] } }, "include": [ "next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", ".next/dev/types/**/*.ts", "**/*.mts" ], "exclude": ["node_modules"] } [V0_FILE]typescript:file="next.config.ts" import { withWorkflow } from "workflow/next"; import type { NextConfig } from "next"; const nextConfig: NextConfig = {}; export default withWorkflow(nextConfig);45:oa,115:Td531,45:od531,[V0_FILE]typescriptreact:file="app/components/demo.tsx" "use client"; import { useState, useCallback, useRef, useEffect, type ReactNode } from "react"; type WorkflowStatus = "idle" | "waiting" | "approved" | "rejected" | "timeout"; interface WorkflowState { status: WorkflowStatus; runId: string | null; orderId: string; token: string | null; timeout: string; elapsed: number; timeoutMs: number; comment?: string; approvedBy?: string; error?: string; } const initialState: WorkflowState = { status: "idle", runId: null, orderId: "", token: null, timeout: "30s", elapsed: 0, timeoutMs: 30000, }; export function ApprovalDemo() { const [state, setState] = useState(initialState); const [orderId, setOrderId] = useState("order_123"); const [approvedBy] = useState("manager@example.com"); const pollingRef = useRef | null>(null); const abortRef = useRef(null); const startButtonRef = useRef(null); const stopPolling = useCallback(() => { if (pollingRef.current) { clearInterval(pollingRef.current); pollingRef.current = null; } }, []); const getAbortSignal = useCallback((): AbortSignal => { if (!abortRef.current || abortRef.current.signal.aborted) { abortRef.current = new AbortController(); } return abortRef.current.signal; }, []); useEffect(() => { return () => { stopPolling(); abortRef.current?.abort(); abortRef.current = null; }; }, [stopPolling]); const pollStatus = useCallback( (token: string) => { stopPolling(); pollingRef.current = setInterval(async () => { try { const signal = getAbortSignal(); const res = await fetch( `/api/mock/approve?token=${encodeURIComponent(token)}`, { signal } ); if (signal.aborted || !res.ok) return; const data = await res.json(); if (signal.aborted) return; setState((prev) => ({ ...prev, status: data.status, elapsed: data.elapsed, comment: data.comment, approvedBy: data.approvedBy, })); if (data.status !== "waiting") { stopPolling(); } } catch (error) { if (error instanceof Error && error.name === "AbortError") { return; } // ignore polling errors } }, 500); }, [getAbortSignal, stopPolling] ); const handleStart = async () => { if (!orderId.trim()) return; setState((prev) => ({ ...prev, error: undefined })); stopPolling(); abortRef.current?.abort(); abortRef.current = null; const signal = getAbortSignal(); try { const res = await fetch("/api/mock/start", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ orderId, timeout: state.timeout }), signal, }); if (signal.aborted) return; const data = await res.json(); if (signal.aborted) return; if (!res.ok) { if (signal.aborted) return; setState((prev) => ({ ...prev, error: data.error })); return; } if (signal.aborted) return; setState({ status: "waiting", runId: data.runId, orderId: data.orderId, token: data.approvalToken, timeout: state.timeout, elapsed: 0, timeoutMs: parseTimeoutToMs(state.timeout), }); if (signal.aborted) { return; } pollStatus(data.approvalToken); } catch (error) { if (error instanceof Error && error.name === "AbortError") { return; } setState((prev) => ({ ...prev, error: "Failed to start workflow", })); } }; const handleDecision = async (approved: boolean) => { if (!state.token) return; const signal = getAbortSignal(); try { const res = await fetch("/api/mock/approve", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ token: state.token, approved, approvedBy: approvedBy || undefined, }), signal, }); if (signal.aborted) return; const data = await res.json(); if (signal.aborted) return; if (!res.ok) { if (signal.aborted) return; setState((prev) => ({ ...prev, error: data.error })); return; } stopPolling(); if (signal.aborted) return; setState((prev) => ({ ...prev, status: approved ? "approved" : "rejected", approvedBy: approvedBy || undefined, })); } catch (error) { if (error instanceof Error && error.name === "AbortError") { return; } setState((prev) => ({ ...prev, error: "Failed to send decision", })); } }; const handleReset = () => { stopPolling(); abortRef.current?.abort(); abortRef.current = null; setState(initialState); setTimeout(() => { startButtonRef.current?.focus(); }, 0); }; const isIdle = state.status === "idle"; const isWaiting = state.status === "waiting"; const isDone = state.status === "approved" || state.status === "rejected" || state.status === "timeout"; const raceWinner = state.status === "timeout" ? "sleep(timeout)" : "approvalHook(token)"; const raceLoser = state.status === "timeout" ? "approvalHook(token)" : "sleep(timeout)"; return (

{state.error && (

{state.error}

)} {/* Step 1: Submit Order */} {isIdle ? (

Timeout

) : (

Order{" "} {state.orderId}{" "} submitted for approval.

)} {/* Step 2: Workflow Suspends */} {isWaiting ? ( ) : isDone ? (

Workflow resumed because{" "} {raceWinner}{" "} won Promise.race().

{raceLoser}{" "} lost and was ignored. Final status:{" "} {state.status}.

) : (

The workflow will suspend here, using zero compute while it waits for a signal.

)} {/* Step 3: Approver Clicks the Link */} {isWaiting ? (

) : state.status === "approved" || state.status === "rejected" || state.status === "timeout" ? ( ) : (

An approval email will be sent with a link containing the hook token.

)} {isDone && ( )}

{/* Badge + title sitting on the top border */}

{title}

{children}

Order {orderId} · {remaining}s until sleep(timeout) can win

First branch to resolve wins and resumes the workflow. The other branch is ignored.

{/* Email chrome */}

From: orders@acme.com

To: {approvedBy}

Subject: Approval required for {orderId}

{/* Email body — lighter background to feel like an email */}

Hi {approvedBy.split("@")[0]},

Order {orderId}{" "} ($2,340.00) has been submitted and needs your approval before it can be fulfilled.

Click here to approve:{" "}

Click here to reject:{" "}

Thanks,
The Acme Orders Team

); } function HookExplainer({ token }: { token: string }) { const baseUrl = "https://acme.com/api/approve"; return (

{`curl -X POST ${baseUrl} \\
  -H "Content-Type: application/json" \\
  -d '{"token":"${token}","approved":true}'`}

{c.icon}

Order {orderId}: {c.label}

{c.raceSummary}

{status === "timeout" && (

No approval arrived before the deadline, so the order was automatically cancelled.

)} {comment && (

“{comment}”

)} {approvedBy && (

By {approvedBy}

)}

          
            {tokens.map((line, i) => {
              const lineNumber = i + 1;
              const isHighlighted = highlightedLines.has(lineNumber);
              const lineProps = getLineProps({ line });
              return (
                
                  {line.map((token, key) => (
                    
                  ))}
                
              );
            })}

Workflow DevKit Example

Approval Gate

Your workflow needs a human to say {"\u201C"}yes.{"\u201D"} It pauses durably until a signal arrives. No polling, no cron, no database. One Promise.race().

How It Works

Order comes in

The workflow starts and sends a notification with a deterministic token {"\u2014"}{" "} order_approval:{"{"}orderId{"}"} . Put it in an email, wire it to a Slack action, call it from a CLI. If you know the order ID, you know the token.
Approval vs timeout race starts

One{" "} Promise.race() {" "}{"\u2014"} two durable branches run in parallel: approval hook vs timeout timer. The hook resolves when someone approves,{" "} sleep("24h") {" "}resolves after 24 hours. Whichever resolves first wins. The losing branch is discarded for this run.
Winner locks the outcome

If approval arrives first, the workflow resumes and fulfills or rejects. If timeout fires first, it cancels as timed out. A late approval after timeout will not change the result {"\u2014"} and a timeout firing after approval is ignored too.

Try It

Submit an order, watch the workflow pause, then send the signal {"\u2014"} click a link or copy the curl command.

Why Hooks

No polling, no cron, no database {"\u2013"} The workflow doesn't know who or what will resume it. Any system that can POST with the token works.
Pauses durably {"\u2013"} The workflow suspends with zero compute. It can wait for seconds or weeks. The sleep survives deploys, restarts, everything.
Deterministic tokens {"\u2013"} Stable across restarts. Derived from your data (e.g. order ID), so external systems can construct them without storing state.
Typed payloads {"\u2013"} The data sent back to the workflow is typed end-to-end with{" "} defineHook<T>() .

The Code

workflows/approval-gate.ts

); } [V0_FILE]css:file="app/globals.css" @import "tailwindcss"; @theme { --color-background-100: #0a0a0a; --color-background-200: #171717; --color-gray-100: #1a1a1a; --color-gray-200: #1f1f1f; --color-gray-300: #292929; --color-gray-400: #737373; --color-gray-500: #525252; --color-gray-600: #404040; --color-gray-700: #262626; --color-gray-800: #171717; --color-gray-900: #a1a1a1; --color-gray-1000: #ededed; --color-blue-700: #0070F3; --color-red-700: #E5484D; --color-amber-700: #FFB224; --color-green-700: #46A758; --color-violet-700: #8B5CF6; --color-cyan-700: #06B6D4; --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); } body { background: #0a0a0a; color: #ededed; font-family: var(--font-sans), -apple-system, BlinkMacSystemFont, sans-serif; } /* Prism token colors — Geist dark-mode palette Extracted from vercel.com/geist/code-block (dark theme) */ .token.keyword, .token.keyword.control-flow { color: #f75f8f; } /* pink — keywords */ .token.plain, .token.parameter, .token.punctuation, .token.plain-text, .token.property-access, .token.operator, .token.tag.punctuation { color: #ededed; } /* gray-1000 — plain text */ .token.function, .token.function.maybe-class-name { color: #bf7af0; } /* purple — functions */ .token.tag { color: #62c073; } /* green — JSX/HTML tags */ .token.literal-property.property { color: #ff6166; } /* red — properties */ .token.string, .token.boolean { color: #62c073; } /* green — strings, booleans */ .token.comment { color: #a1a1a1; } /* gray-900 — comments */ .token.class-name { color: #52a8ff; } /* blue — types */ .token.number { color: #62c073; } /* green — numbers */ .token.attr-name { color: #ff6166; } /* red — attribute names */ .token.attr-value { color: #62c073; } /* green — attribute values */ .token.builtin { color: #52a8ff; } /* blue — builtins */ .token.template-string { color: #62c073; } /* green — template literals */ .token.interpolation { color: #ededed; } /* gray-1000 — interpolation */ [V0_FILE]javascript:file="postcss.config.mjs" export default { plugins: { "@tailwindcss/postcss": {}, }, }; [V0_FILE]typescript:file="workflows/approval-gate.ts" import { defineHook, sleep } from "workflow"; import type { StringValue } from "ms"; // Define the approval payload type export interface ApprovalPayload { approved: boolean; comment?: string; approvedBy?: string; } // Define the hook for type-safe approval handling export const orderApprovalHook = defineHook(); // Result type for the workflow export interface ApprovalResult { orderId: string; status: "approved" | "rejected" | "timeout"; comment?: string; approvedBy?: string; } /** * Approval Gate Workflow * * Demonstrates the "Signal + timer" pattern: * - Creates a deterministic hook token for external systems to resume * - Uses Promise.race to implement timeout behavior * - Waits for human approval or times out after specified duration */ export async function approvalGate( orderId: string, timeout: StringValue = "24h" ): Promise { "use workflow"; // Request approval (e.g., send email, create ticket, notify Slack) await requestApproval(orderId); // Create hook with deterministic token based on orderId // This allows external systems to construct the token and resume the workflow const hook = orderApprovalHook.create({ token: `order_approval:${orderId}`, }); console.log(`[Order ${orderId}] Waiting for approval with token: ${hook.token}`); console.log(`[Order ${orderId}] Timeout set to: ${timeout}`); // Race between approval hook and timeout // Signal + timer pattern: race between hook and timeout const result = await Promise.race([ // Wait for external approval via hook hook.then((payload) => ({ type: "approval" as const, payload, })), // Timeout after specified duration sleep(timeout).then(() => ({ type: "timeout" as const, payload: null, })), ]); if (result.type === "timeout") { // Handle timeout - order was not approved in time console.log(`[Order ${orderId}] Approval timed out after ${timeout}`); await cancelOrder(orderId, "Approval timed out"); return { orderId, status: "timeout", }; } // Handle approval response const { approved, comment, approvedBy } = result.payload!; if (approved) { console.log(`[Order ${orderId}] Approved by ${approvedBy || "unknown"}`); await fulfillOrder(orderId); return { orderId, status: "approved", comment, approvedBy, }; } else { console.log(`[Order ${orderId}] Rejected by ${approvedBy || "unknown"}`); await cancelOrder(orderId, comment || "Rejected by approver"); return { orderId, status: "rejected", comment, approvedBy, }; } } /** * Step: Request approval from external system * In a real app, this might send an email, create a ticket, or notify Slack */ async function requestApproval(orderId: string): Promise { "use step"; console.log(`[Order ${orderId}] Sending approval request...`); // Simulate sending approval request // In production, you might: // - Send an email with approve/reject links containing the token // - Create a ticket in a ticketing system // - Post to Slack with action buttons // - Call an external approval API console.log(`[Order ${orderId}] Approval request sent`); console.log(`[Order ${orderId}] Token: order_approval:${orderId}`); } /** * Step: Fulfill the order after approval */ async function fulfillOrder(orderId: string): Promise { "use step"; console.log(`[Order ${orderId}] Fulfilling order...`); // Simulate order fulfillment // In production: process payment, ship items, etc. console.log(`[Order ${orderId}] Order fulfilled successfully`); } /** * Step: Cancel the order (on rejection or timeout) */ async function cancelOrder(orderId: string, reason: string): Promise { "use step"; console.log(`[Order ${orderId}] Cancelling order...`); console.log(`[Order ${orderId}] Reason: ${reason}`); // Simulate order cancellation // In production: release inventory, refund if needed, notify customer console.log(`[Order ${orderId}] Order cancelled`); } [V0_FILE]json:file="package.json" { "name": "approval-gate", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "next": "16.0.10", "prism-react-renderer": "^2.4.1", "react": "19.2.3", "react-dom": "19.2.3", "workflow": "4.1.0-beta.53" }, "devDependencies": { "@tailwindcss/postcss": "^4", "@types/ms": "^2.1.0", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", "ms": "^2.1.3", "tailwindcss": "^4", "typescript": "^5" } } [V0_FILE]json:file="tsconfig.json" { "compilerOptions": { "target": "ES2017", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "react-jsx", "incremental": true, "plugins": [ { "name": "next" }, { "name": "workflow" } ], "paths": { "@/*": ["./*"] } }, "include": [ "next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", ".next/dev/types/**/*.ts", "**/*.mts" ], "exclude": ["node_modules"] } [V0_FILE]typescript:file="next.config.ts" import { withWorkflow } from "workflow/next"; import type { NextConfig } from "next"; const nextConfig: NextConfig = {}; export default withWorkflow(nextConfig);45:o156b,f3:["$","$Lf5",null,{"params":{"chatId":"YbBjtqkPLom"},"promises":{"attributes":"$@ff","externalMeta":"$@100","latest":"$@101","messagesRange":"$@102","messages":"$@103","template":"$@104","gitStatus":"$@105"},"children":["$","$L107",null,{"chatId":"YbBjtqkPLom","children":["$","$L108",null,{"seedOnlyKeys":["@\"chat:state\",\"YbBjtqkPLom\","],"data":{"block:output:initial":{"id":"b_HNq75LiGG8T","result":"$@109"},"@\"block:mappings\",\"YbBjtqkPLom\",":{"sqlBlockExecutionStates":"$Q10a","blocksForkedFrom":"$Q10b","blocksTemplateIds":"$Q10c","blocksCreatedAt":"$Q10d","blocksShared":"$Q10e","blocksDeployed":"$Q10f","blocksSubdomains":"$Q110","brandedBlocks":"$Q111","unlistedBlocks":"$Q112","blockOutputs":"$Q113"},"@\"chat:state\",\"YbBjtqkPLom\",":{"messages":[{"content":{"type":"parts","parts":[{"type":"mdx","content":"Start from these files."}],"version":1},"role":"user","id":"3AJqpIODHyhleEkpqMPAmuLh4MU1g2Cd","type":"open-in-v0","authorId":"K3nZqZVw4tOvd60y3Yxq8oC5","createdAt":"$D2026-02-25T20:27:53.033Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["strong",{},["text",{},"Approval Gate"]],["text",{}," was imported from uploaded files. Continue chatting to ask questions about or make changes to it."]],["AssistantMessageContentPart",{"part":{"type":"task-coding-v1","id":"block-b_HNq75LiGG8T","parts":[{"type":"code-project","isVersioned":true,"isSourceless":false,"changedFiles":[{"fileName":"app/components/demo.tsx","baseName":"demo.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"app/components/code-block.tsx","baseName":"code-block.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"app/layout.tsx","baseName":"layout.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"app/api/mock/start/route.ts","baseName":"route.ts","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"app/api/mock/api.ts","baseName":"api.ts","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"app/api/mock/approve/route.ts","baseName":"route.ts","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"app/api/start/route.ts","baseName":"route.ts","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"app/api/approve/route.ts","baseName":"route.ts","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"app/page.tsx","baseName":"page.tsx","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"app/globals.css","baseName":"globals.css","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"postcss.config.mjs","baseName":"postcss.config.mjs","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"workflows/approval-gate.ts","baseName":"approval-gate.ts","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"package.json","baseName":"package.json","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"tsconfig.json","baseName":"tsconfig.json","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"next.config.ts","baseName":"next.config.ts","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false}],"source":"$114","sourceVersionKey":"v_1_w1x62_s3","needsBlockSource":false,"isAllImages":false,"blockId":"b_HNq75LiGG8T","meta":{"type":"code-project","taskNameActive":"Initializing project","taskNameComplete":"Initialized project","project":"Code"},"closed":true,"lang":"typescriptreact"}],"createdAt":0,"finishedAt":1,"lastPartSentAt":1,"taskNameActive":"Initializing project","taskNameComplete":"Initialized project"},"id":"block-b_HNq75LiGG8T"}]]],[1,{}]]},"context":[],"isContentLoading":false,"role":"assistant","id":"vEzqiwO18RIgjiQmuLt8a0d6DXV2ooqQ","gitRevision":null,"streaming":false,"finishReason":"stop","parentId":"3AJqpIODHyhleEkpqMPAmuLh4MU1g2Cd","type":"open-in-v0","workMetrics":{"diffMap":{}},"createdAt":"$D2026-02-25T20:27:53.034Z","updatedAt":"$D2026-02-25T20:27:53.121Z"}],"lastSyncedAt":1789105562784,"undo":null,"activeForkKey":["3AJqpIODHyhleEkpqMPAmuLh4MU1g2Cd","vEzqiwO18RIgjiQmuLt8a0d6DXV2ooqQ"],"lifecycle":{"phase":"idle","persistence":"persisted"},"isAuthor":false,"isRestoring":false,"hashMessageId":null},"@\"active-block\",\"YbBjtqkPLom\",":{"id":"b_HNq75LiGG8T","meta":{"type":"code-project","taskNameActive":"Initializing project","taskNameComplete":"Initialized project","project":"Code"},"initial":true,"type":"code-project","messageId":"vEzqiwO18RIgjiQmuLt8a0d6DXV2ooqQ","language":"typescriptreact","source":"$115","closed":true,"hasSourceBeenEdited":false,"isLoading":false,"needsBlockSource":false},"@\"chat:meta\",\"YbBjtqkPLom\",":{"title":"Approval Gate","authorId":"K3nZqZVw4tOvd60y3Yxq8oC5","ownerId":"team_nO2mCG4W8IxPIeKoSsqwAxxB","storageEntityType":null,"storageEntityId":null,"tailwindV4Default":true,"vercelProjectId":"prj_UW1AeADgYUiCatxSngQAqhUyx08g","canWriteToChat":false,"from":"api-init","nextVersionDefault":16},"@\"chat:vm-mode\",\"YbBjtqkPLom\",":false,"@\"chat:vercel-project\",\"YbBjtqkPLom\",":"$@116","@\"team:sensitive-environment-variable-policy\",\"YbBjtqkPLom\",":"$@117","@\"block-view\",\"YbBjtqkPLom\",":true,"integrations:figma":"$@118"},"children":["$L119","$L11a","$L11b","$L11c","$L11d"]}]}]}] 45:o8,f2:null 45:odca,11e:I[900547,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$81","$82","$83","$7e","$84","$85","$7f","$86","$87","$88","$89","$8a","$7d"],"FullChat",1] 11f:"NavigationMarker" 120:I[681304,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$81","$82","$83","$7e","$84","$85","$7f","$86","$87","$88","$89","$8a","$7d"],"$11f"] 121:"OpenInV0JourneyCompletion" 122:I[228493,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$81","$82","$83","$7e","$84","$85","$7f","$86","$87","$88","$89","$8a","$7d"],"$121"] 123:"SuspendingKeepTitleUpdated" 124:I[487989,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$81","$82","$83","$7e","$84","$85","$7f","$86","$87","$88","$89","$8a","$7d"],"$123"] 125:"KeepClientOnUpToDateSlugPath" 126:I[983440,["$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$81","$82","$83","$7e","$84","$85","$7f","$86","$87","$88","$89","$8a","$7d"],"$125"] ff:{"ok":true,"value":{"designSystemId":null,"title":"Approval Gate","privacy":"public","access":1,"isAdmin":false,"isAuthor":false,"ownerId":"team_nO2mCG4W8IxPIeKoSsqwAxxB","tailwindV4Default":true,"nextVersionDefault":16,"nextVersion15Default":false,"forceVMRendering":false,"isNextLiteReadOnly":true,"canWriteToChat":false,"chatCreatedAt":1772051273121,"hasBlock":true,"vercelProject":null,"hasGitConnection":false,"gitBase":null,"gitHead":null,"hasSnowflakeIntegration":false,"chatHasAnySnowflakeIntegration":false,"storageEntityType":null,"storageEntityId":null,"vercelProjectId":"prj_UW1AeADgYUiCatxSngQAqhUyx08g","defaultPreviewPath":null,"agentWorkspace":false,"workspaceRuntime":false}} 100:{"ok":false,"error":{"error":"Unauthorized","statusCode":401,"errorCode":"2"}} 101:{"ok":false,"error":{"error":"51","statusCode":500,"errorCode":"38"}} 102:{"ok":false,"error":{"error":"51","statusCode":500,"errorCode":"38"}} 103:{"ok":false,"error":{"error":"51","statusCode":500,"errorCode":"38"}} 104:{"ok":false,"error":{"error":"Unauthorized","statusCode":401,"errorCode":"2"}} 105:{"ok":false,"error":{"error":"Unauthorized","statusCode":401,"errorCode":"2"}} 109:null 116:"$undefined" 117:"$undefined" 118:{"isSignedIn":false} 119:["$","$L11e","full-chat",{"isMobile":false,"templatesServer":null}] 11a:["$","$L120",null,{"phase":"content","label":"Chat.Detail","routeOverride":"/chat/[slug]"}] 11b:["$","$L122",null,{}] 11c:["$","$3e",null,{"children":["$","$L124",null,{"chatId":"YbBjtqkPLom"}]}] 11d:["$","$L126",null,{"id":"YbBjtqkPLom","requireMatchingChatPath":true,"title":"Approval Gate"}] 45:o11,43:true 42:60357 45:o2c,41:C 40:C 1:C 38:C 22:C 36:C 2c:C 1b:C 18:C 45:C

How It Works

Order comes in

Approval vs timeout race starts

Winner locks the outcome

Try It

Why Hooks

The Code

How It Works

Order comes in

Approval vs timeout race starts

Winner locks the outcome

Try It

Why Hooks

The Code