28:o1,#28:oe57,1:I[768017,["/_next/static/immutable/chunks/0vm3mw8xy2s8d.js"],"HTTPAccessFallbackBoundary"] 2:I[479520,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],""] 3:I[305215,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"ThemeProvider"] 4:"$Sreact.suspense" 5:I[357003,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"TRPCReactProvider"] 6:I[492605,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"BetterModalProvider"] 7:I[12985,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"NuqsAdapter"] :HL["/_next/static/immutable/chunks/3-y5jlwadbcp9.css","style"] :HL["/_next/static/immutable/chunks/1_idk1l4ecx9m.css","style"] 16:X 17:X 1c:X 1d:X 1f:X 20:X 21:X 28:o142e,0:{"f":[[["",{"children":[["registry","registrydirectory","d",["(.)[registry]","account","api","guides","legal","r","saved","search","setup","sign-in","sign-out","sitemap-index.xml","sitemaps","tb","tools"]],{"children":[["item","localmode-ai-ui-blocks-chat","d",["search"]],{"children":["__PAGE__",{},"$undefined","$undefined",16546]},"$undefined","$undefined",16482]},"$undefined","$undefined",16450],"modal":["(__SLOT__)",{"children":[["registry","registrydirectory","d",["(.)[registry]","account","api","guides","legal","r","saved","search","setup","sign-in","sign-out","sitemap-index.xml","sitemaps","tb","tools"]],{"children":[["item","localmode-ai-ui-blocks-chat","d",["search"]],{"children":["__PAGE__",{},"$undefined","$undefined",16418]},"$undefined","$undefined",16482]},"$undefined","$undefined",16482]},"$undefined","$undefined",16450]},"$undefined","$undefined",16402],[["$","$L1","c",{"notFound":[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/immutable/chunks/3-y5jlwadbcp9.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/immutable/chunks/1_idk1l4ecx9m.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/_next/static/immutable/chunks/3arlv5bvukoo2.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/_next/static/immutable/chunks/39v64hmfyo-sr.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/_next/static/immutable/chunks/2nvof3-29tvc3.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/_next/static/immutable/chunks/3tjobt77z_9dj.js","async":true,"nonce":"$undefined"}],["$","script","script-4",{"src":"/_next/static/immutable/chunks/04j_o97cgxn2x.js","async":true,"nonce":"$undefined"}],["$","script","script-5",{"src":"/_next/static/immutable/chunks/3upr08c9vtj8w.js","async":true,"nonce":"$undefined"}],["$","script","script-6",{"src":"/_next/static/immutable/chunks/1ww0328si-u8x.js","async":true,"nonce":"$undefined"}],["$","script","script-7",{"src":"/_next/static/immutable/chunks/11mfl5ymqld9-.js","async":true,"nonce":"$undefined"}],["$","script","script-8",{"src":"/_next/static/immutable/chunks/2xxcqy6ppds3l.js","async":true,"nonce":"$undefined"}],["$","script","script-9",{"src":"/_next/static/immutable/chunks/1bpgyrs5qflhu.js","async":true,"nonce":"$undefined"}],["$","script","script-10",{"src":"/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","async":true,"nonce":"$undefined"}],["$","script","script-11",{"src":"/_next/static/immutable/chunks/43_s7jweyypoh.js","async":true,"nonce":"$undefined"}],["$","script","script-12",{"src":"/_next/static/immutable/chunks/0p6vao205o1jc.js","async":true,"nonce":"$undefined"}]],["$","html",null,{"lang":"en","className":"chakra_petch_1af0601e-module__OA5m0G__variable dm_sans_d89fb377-module__B_rulq__variable ibm_plex_mono_b1df0642-module__ou0oxa__variable","suppressHydrationWarning":true,"children":[["$","head",null,{"children":[["$","script",null,{"dangerouslySetInnerHTML":{"__html":"(function(){var v=[\"makers\",\"ai\",\"slop-police\"];document.documentElement.dataset.hireVariant=v[Math.floor(Math.random()*v.length)]})()"}}],["$","$L2",null,{"async":true,"data-website-id":"211088d7-313a-4d73-abc7-2a091c652668","src":"/u/script.js"}]]}],["$","body",null,{"className":"antialiased","children":["$","$L3",null,{"attribute":"class","defaultTheme":"dark","disableTransitionOnChange":true,"enableSystem":false,"children":["$","$4",null,{"children":["$","$L5",null,{"children":["$","$L6",null,{"children":[["$","$L7",null,{"children":["$","div",null,{"className":"flex min-h-svh flex-col","children":[[["$","a","makers",{"href":"https://cal.com/jlnlabs/chat?utm_source=shadcnregistry&utm_medium=banner&utm_content=makers","target":"_blank","rel":"noopener","data-umami-event":"hire-banner-click","data-umami-event-variant":"makers","className":"group hidden bg-blue-600 text-white transition-colors hover:bg-blue-500 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-blue-300 focus-visible:ring-inset in-data-[hire-variant=makers]:block","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-9 items-center justify-center gap-3 text-center text-sm","children":[["$","span",null,{"className":"flex shrink-0 items-center gap-1.5 md:rounded-full md:border md:border-white/25 md:bg-white/15 md:px-2.5 md:py-0.5 md:font-medium md:text-xs","children":[["$","span",null,{"aria-hidden":"true","className":"size-1.5 rounded-full bg-green-400 ring-[3px] ring-green-400/25"}],"$L8"]}],"$L9","$La"]}]}],"$Lb","$Lc"],"$Ld","$Le","$undefined","$Lf"]}]}],"$L10","$L11"]}]}]}]}]}]]}]],"children":["$0:f:0:1:0:props:notFound:0","$L12"]}],{"children":["$L13",{"children":["$L14",{"children":["$L15",{},null,false,"$16"]},null,false,"$17"]},null,false,"$17"],"modal":["$L18",{"children":["$L19",{"children":["$L1a",{"children":["$L1b",{},null,false,"$1c"]},null,false,"$17"]},null,false,"$17"]},null,false,"$17"]},null,false,"$1d"],"$L1e",false]],"q":"","i":true,"S":false,"h":"$1f","r":"$20","s":"$21","a":"$@22","u":"$@23"} 28:o1000,24:I[522016,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],""] 25:I[332862,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"ThemeToggle"] 26:I[618898,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"UserButton"] 27:I[799157,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"Sheet"] 28:I[799157,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"SheetTrigger"] 29:I[799157,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_ne28:o1000,xt/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"SheetContent"] 2a:I[799157,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"SheetTitle"] 2b:I[799157,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"SheetDescription"] 2c:I[767877,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"PrimaryNavigation"] 35:I[246331,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"Toaster"] 36:I[994245,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js"],"AffiliateToast"] 40:"$Sreact.fragment" 41:I[339756,["/_next/static/immutable/chunks/0vm3mw8xy2s8d.js"],"default"] 42:I[837457,["/_next/static/immutable/chunks/0vm3mw8xy2s8d.js"],"default"] 44:I[897367,["/_next/static/immutable/chunks/0vm3mw8xy2s8d.js"],"OutletBoundary"] 46:I[897367,["/_next/static/immutable/chunks/0vm3mw8xy2s8d.js"],"ViewportBoundary"] 48:I[897367,["/_next/static/immutable/chunks/0vm3mw8xy2s8d.js"],"MetadataBoundary"] 8:["$","span",null,{"className":"sr-only md:not-sr-only","children":"1 slot open this month"}] 9:["$","span",null,{"className":"truncate","children":[["$","sp28:o3ac,an",null,{"className":"sm:hidden","children":"By the makers of shadcnregistry"}],["$","span",null,{"className":"hidden sm:inline","children":"We built shadcnregistry. Now we build your product."}]]}] a:["$","span",null,{"className":"flex shrink-0 items-center gap-1 font-semibold underline-offset-4 group-hover:underline","children":[["$","span",null,{"className":"sm:hidden","children":"Book a call"}],["$","span",null,{"className":"hidden sm:inline","children":"Check availability"}],["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-right size-3.5 transition-transform group-hover:translate-x-0.5","aria-hidden":"true","children":[["$","path","1ays0h",{"d":"M5 12h14"}],["$","path","xquz4c",{"d":"m12 5 7 7-7 7"}],"$undefined"]}]]}] 28:o7b3,b:["$","a","ai",{"href":"https://cal.com/jlnlabs/chat?utm_source=shadcnregistry&utm_medium=banner&utm_content=ai","target":"_blank","rel":"noopener","data-umami-event":"hire-banner-click","data-umami-event-variant":"ai","className":"group hidden bg-blue-600 text-white transition-colors hover:bg-blue-500 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-blue-300 focus-visible:ring-inset in-data-[hire-variant=ai]:block","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-9 items-center justify-center gap-3 text-center text-sm","children":[["$","span",null,{"className":"flex shrink-0 items-center gap-1.5 md:rounded-full md:border md:border-white/25 md:bg-white/15 md:px-2.5 md:py-0.5 md:font-medium md:text-xs","children":[["$","span",null,{"aria-hidden":"true","className":"size-1.5 rounded-full bg-green-400 ring-[3px] ring-green-400/25"}],["$","span",null,{"className":"sr-only md:not-sr-only","children":"1 slot open this month"}]]}],["$","span",null,{"className":"truncate","children":[["$","span",null,{"className":"sm:hidden","children":"AI features?"}],["$","span",null,{"className":"hidden sm:inline","children":"We build AI features into your product."}]]}],["$","span",null,{"className":"flex shrink-0 items-center gap-1 font-semibold underline-offset-4 group-hover:underline","children":[["$","span",null,{"className":"sm:hidden","children":"Book a call"}],["$","span",null,{"className":"hidden sm:inline","children":"Check availability"}],["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-right size-3.5 transition-transform group-hover:translate-x-0.5","aria-hidden":"true","children":[["$","path","1ays0h",{"d":"M5 12h14"}],["$","path","xquz4c",{"d":"m12 5 7 7-7 7"}],"$undefined"]}]]}]]}]}] 28:o7dd,c:["$","a","slop-police",{"href":"https://cal.com/jlnlabs/chat?utm_source=shadcnregistry&utm_medium=banner&utm_content=slop-police","target":"_blank","rel":"noopener","data-umami-event":"hire-banner-click","data-umami-event-variant":"slop-police","className":"group hidden bg-blue-600 text-white transition-colors hover:bg-blue-500 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-blue-300 focus-visible:ring-inset in-data-[hire-variant=slop-police]:block","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-9 items-center justify-center gap-3 text-center text-sm","children":[["$","span",null,{"className":"flex shrink-0 items-center gap-1.5 md:rounded-full md:border md:border-white/25 md:bg-white/15 md:px-2.5 md:py-0.5 md:font-medium md:text-xs","children":[["$","span",null,{"aria-hidden":"true","className":"size-1.5 rounded-full bg-green-400 ring-[3px] ring-green-400/25"}],["$","span",null,{"className":"sr-only md:not-sr-only","children":"1 slot open this month"}]]}],["$","span",null,{"className":"truncate","children":[["$","span",null,{"className":"sm:hidden","children":"🚨 Slop police"}],["$","span",null,{"className":"hidden sm:inline","children":"🚨 Slop police: we clean up vibe-coded apps."}]]}],["$","span",null,{"className":"flex shrink-0 items-center gap-1 font-semibold underline-offset-4 group-hover:underline","children":[["$","span",null,{"className":"sm:hidden","children":"Report it"}],["$","span",null,{"className":"hidden sm:inline","children":"Report your app"}],["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-right size-3.5 transition-transform group-hover:translate-x-0.5","aria-hidden":"true","children":[["$","path","1ays0h",{"d":"M5 12h14"}],["$","path","xquz4c",{"d":"m12 5 7 7-7 7"}],"$undefined"]}]]}]]}]}] 28:o1368,d:[["$","header",null,{"className":"sticky top-0 z-50 border-b bg-background/90 backdrop-blur-md md:hidden","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-16 items-center justify-between","children":[["$","$L24",null,{"href":"/","className":"flex items-center gap-2 font-heading font-semibold text-sm tracking-[-0.02em]","children":[["$","svg",null,{"viewBox":"0 0 900 900","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"size-8","children":[["$","rect",null,{"x":"36","y":"344","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"148","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"456","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"148","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"36","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"764","y":"344","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"664","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"552","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"440","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"764","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"664","y":"456","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"440","y":"456","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"440","y":"568","width":"100","height":"100","fill":"currentColor"}]]}],["$","span",null,{"children":"shadcnregistry"}]]}],["$","div",null,{"className":"flex items-center gap-2","children":[["$","$L25",null,{}],["$","$L26",null,{}],["$","$L27",null,{"modal":true,"children":[["$","$L28",null,{"asChild":true,"children":["$","button",null,{"data-slot":"button","className":"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 size-9","aria-label":"Open navigation","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-menu","aria-hidden":"true","children":[["$","path","1lakjw",{"d":"M4 12h16"}],["$","path","19g7jn",{"d":"M4 18h16"}],["$","path","1o0s65",{"d":"M4 6h16"}],"$undefined"]}]}]}],["$","$L29",null,{"className":"w-[min(22rem,90vw)] rounded-l-xl p-6","children":[["$","$L2a",null,{"className":"text-lg","children":"Tools"}],["$","$L2b",null,{"className":"sr-only","children":"Navigate between registry tools."}],["$","$L2c",null,{"orientation":"vertical","closeOnNavigate":true,"className":"mt-4"}]]}]]}]]}]]}]}],["$","header",null,{"className":"sticky top-0 z-50 hidden border-b bg-background/90 backdrop-blur-md md:block","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-16 items-center gap-6","children":[["$","$L24",null,{"className":"flex min-w-32 select-none items-center gap-2 font-heading font-semibold text-sm tracking-[-0.02em]","href":"/","children":[["$","svg",null,{"viewBox":"0 0 900 900","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"size-8","children":[["$","rect",null,{"x":"36","y":"344","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"148","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"456","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"148","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"36","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"764","y":"344","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"664","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"552","y":"232","width":"100","height":"100","fill":"currentColor"}],"$L2d","$L2e","$L2f","$L30","$L31"]}],"$L32"]}],"$L33","$L34"]}]}]] 28:o6a2,e:["$","main",null,{"className":"flex flex-1 flex-col","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex flex-1 flex-col","children":[[],[[["$","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."}]}]]}]}]],"$e:props:children:props:children:0"]]}]}] f:["$","footer",null,{"className":"border-t text-muted-foreground text-xs","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex items-center justify-end gap-4 py-5","children":[["$","$L24",null,{"href":"/legal/terms","children":"Terms of Service"}],["$","$L24",null,{"href":"/legal/privacy","children":"Privacy Policy"}]]}]}] 10:["$","$L35",null,{}] 11:["$","$L36",null,{}] 28:o103e,12:["$","html",null,{"lang":"en","className":"chakra_petch_1af0601e-module__OA5m0G__variable dm_sans_d89fb377-module__B_rulq__variable ibm_plex_mono_b1df0642-module__ou0oxa__variable","suppressHydrationWarning":true,"children":[["$","head",null,{"children":[["$","script",null,{"dangerouslySetInnerHTML":{"__html":"(function(){var v=[\"makers\",\"ai\",\"slop-police\"];document.documentElement.dataset.hireVariant=v[Math.floor(Math.random()*v.length)]})()"}}],["$","$L2",null,{"async":true,"data-website-id":"211088d7-313a-4d73-abc7-2a091c652668","src":"/u/script.js"}]]}],["$","body",null,{"className":"antialiased","children":["$","$L3",null,{"attribute":"class","defaultTheme":"dark","disableTransitionOnChange":true,"enableSystem":false,"children":["$","$4",null,{"children":["$","$L5",null,{"children":["$","$L6",null,{"children":[["$","$L7",null,{"children":["$","div",null,{"className":"flex min-h-svh flex-col","children":[[["$","a","makers",{"href":"https://cal.com/jlnlabs/chat?utm_source=shadcnregistry&utm_medium=banner&utm_content=makers","target":"_blank","rel":"noopener","data-umami-event":"hire-banner-click","data-umami-event-variant":"makers","className":"group hidden bg-blue-600 text-white transition-colors hover:bg-blue-500 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-blue-300 focus-visible:ring-inset in-data-[hire-variant=makers]:block","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-9 items-center justify-center gap-3 text-center text-sm","children":[["$","span",null,{"className":"flex shrink-0 items-center gap-1.5 md:rounded-full md:border md:border-white/25 md:bg-white/15 md:px-2.5 md:py-0.5 md:font-medium md:text-xs","children":[["$","span",null,{"aria-hidden":"true","className":"size-1.5 rounded-full bg-green-400 ring-[3px] ring-green-400/25"}],["$","span",null,{"className":"sr-only md:not-sr-only","children":"1 slot open this month"}]]}],["$","span",null,{"className":"truncate","children":[["$","span",null,{"className":"sm:hidden","children":"By the makers of shadcnregistry"}],["$","span",null,{"className":"hidden sm:inline","children":"We built shadcnregistry. Now we build your product."}]]}],["$","span",null,{"className":"flex shrink-0 items-center gap-1 font-semibold underline-offset-4 group-hover:underline","children":[["$","span",null,{"className":"sm:hidden","children":"Book a call"}],["$","span",null,{"className":"hidden sm:inline","children":"Check availability"}],["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-right size-3.5 transition-transform group-hover:translate-x-0.5","aria-hidden":"true","children":[["$","path","1ays0h",{"d":"M5 12h14"}],["$","path","xquz4c",{"d":"m12 5 7 7-7 7"}],"$undefined"]}]]}]]}]}],["$","a","ai",{"href":"https://cal.com/jlnlabs/chat?utm_source=shadcnregistry&utm_medium=banner&utm_content=ai","target":"_blank","rel":"noopener","data-umami-event":"hire-banner-click","data-umami-event-variant":"ai","className":"group hidden bg-blue-600 text-white transition-colors hover:bg-blue-500 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-blue-300 focus-visible:ring-inset in-data-[hire-variant=ai]:block","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-9 items-center justify-center gap-3 text-center text-sm","children":[["$","span",null,{"className":"flex shrink-0 items-center gap-1.5 md:rounded-full md:border md:border-white/25 md:bg-white/15 md:px-2.5 md:py-0.5 md:font-medium md:text-xs","children":[["$","span",null,{"aria-hidden":"true","className":"size-1.5 rounded-full bg-green-400 ring-[3px] ring-green-400/25"}],["$","span",null,{"className":"sr-only md:not-sr-only","children":"1 slot open this month"}]]}],["$","span",null,{"className":"truncate","children":[["$","span",null,{"className":"sm:hidden","children":"AI features?"}],"$L37"]}],"$L38"]}]}],"$L39"],"$L3a","$L3b","$L3c","$L3d"]}]}],"$L3e","$L3f"]}]}]}]}]}]]}] 28:o2a0,13:["$","$40","c",{"children":[null,["$","$L41",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L42",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 14:["$","$40","c",{"children":[null,["$","$L41",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L42",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 28:odfc,15:["$","$40","c",{"children":[["$","div",null,{"className":"flex min-w-0 flex-1 flex-col py-8","children":["$","$4",null,{"fallback":["$","div",null,{"className":"flex min-h-0 min-w-0 flex-1 flex-col motion-reduce:[&_*]:animate-none","role":"status","aria-label":"Loading item","children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md mb-6 h-5 w-64 max-w-full","aria-hidden":true}],["$","div",null,{"className":"grid shrink-0 gap-3","aria-hidden":true,"children":[["$","div",null,{"className":"flex min-w-0 items-start justify-between gap-2 sm:gap-4","children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-8 w-56 min-w-0 sm:h-9"}],["$","div",null,{"className":"flex shrink-0 gap-1.5 pt-0.5","children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md size-8 sm:w-24"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md size-8"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md size-8"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md size-8"}]]}]]}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-6 w-full max-w-3xl"}]]}],["$","div",null,{"className":"mt-3 shrink-0","aria-hidden":true,"children":["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-10"}]}],["$","div",null,{"className":"mt-3 flex min-h-0 flex-1 flex-col gap-3 motion-reduce:[&_*]:animate-none","aria-hidden":true,"children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-8 shrink-0"}],["$","div",null,{"className":"flex flex-col overflow-hidden border bg-muted/30 h-[70svh] min-h-80 rounded-lg","children":[["$","div",null,{"className":"flex h-11 shrink-0 items-center gap-3 border-b px-3","children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-6 w-16"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-40"}]]}],["$","div",null,{"className":"flex min-h-0 flex-1","children":[["$","div",null,{"className":"hidden w-[23%] flex-col gap-3 border-r p-4 md:flex","children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-2/3"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-1/2"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-3/4"}]]}],["$","div",null,{"className":"flex flex-1 flex-col gap-4 p-6","children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-2/3"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-1/2"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-3/4"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-1/3"}]]}]]}]]}]]}]]}],"children":"$L43"}]}],[["$","script","script-0",{"src":"/_next/static/immutable/chunks/1_kyvgkyokw92.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/_next/static/immutable/chunks/1lo-zn37dolb5.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/_next/static/immutable/chunks/1v8k6yxw1rg0u.js","async":true,"nonce":"$undefined"}]],["$","$L44",null,{"children":["$","$4",null,{"name":"Next.MetadataOutlet","children":"$@45"}]}]]}] 28:o51c,18:["$","$40","c",{"children":[null,["$","$L41",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L42",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 19:["$","$40","c",{"children":[null,["$","$L41",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L42",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 1a:["$","$40","c",{"children":[null,["$","$L41",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L42",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] 1b:["$","$40","c",{"children":[null,null,null]}] 1e:["$","$40","h",{"children":[null,["$","$L46","U7HdyVTpEe_HqOWKrKhWQv",{"children":"$L47"}],["$","div","U7HdyVTpEe_HqOWKrKhWQm",{"hidden":true,"children":["$","$L48",null,{"children":["$","$4",null,{"name":"Next.Metadata","children":"$L49"}]}]}]]}] 28:o62f,16:T1,?17:C 1c:T1,?1f:T1,?21:300 2d:["$","rect",null,{"x":"440","y":"232","width":"100","height":"100","fill":"currentColor"}] 2e:["$","rect",null,{"x":"764","y":"568","width":"100","height":"100","fill":"currentColor"}] 2f:["$","rect",null,{"x":"664","y":"456","width":"100","height":"100","fill":"currentColor"}] 30:["$","rect",null,{"x":"440","y":"456","width":"100","height":"100","fill":"currentColor"}] 31:["$","rect",null,{"x":"440","y":"568","width":"100","height":"100","fill":"currentColor"}] 32:["$","span",null,{"children":"shadcnregistry"}] 33:["$","$L2c",null,{"className":"mx-auto"}] 34:["$","div",null,{"className":"flex min-w-32 items-center justify-end gap-2","children":[["$","$L25",null,{}],["$","$L26",null,{}]]}] 37:["$","span",null,{"className":"hidden sm:inline","children":"We build AI features into your product."}] 38:["$","span",null,{"className":"flex shrink-0 items-center gap-1 font-semibold underline-offset-4 group-hover:underline","children":[["$","span",null,{"className":"sm:hidden","children":"Book a call"}],["$","span",null,{"className":"hidden sm:inline","children":"Check availability"}],["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-right size-3.5 transition-transform group-hover:translate-x-0.5","aria-hidden":"true","children":[["$","path","1ays0h",{"d":"M5 12h14"}],["$","path","xquz4c",{"d":"m12 5 7 7-7 7"}],"$undefined"]}]]}] 28:o7de,39:["$","a","slop-police",{"href":"https://cal.com/jlnlabs/chat?utm_source=shadcnregistry&utm_medium=banner&utm_content=slop-police","target":"_blank","rel":"noopener","data-umami-event":"hire-banner-click","data-umami-event-variant":"slop-police","className":"group hidden bg-blue-600 text-white transition-colors hover:bg-blue-500 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-blue-300 focus-visible:ring-inset in-data-[hire-variant=slop-police]:block","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-9 items-center justify-center gap-3 text-center text-sm","children":[["$","span",null,{"className":"flex shrink-0 items-center gap-1.5 md:rounded-full md:border md:border-white/25 md:bg-white/15 md:px-2.5 md:py-0.5 md:font-medium md:text-xs","children":[["$","span",null,{"aria-hidden":"true","className":"size-1.5 rounded-full bg-green-400 ring-[3px] ring-green-400/25"}],["$","span",null,{"className":"sr-only md:not-sr-only","children":"1 slot open this month"}]]}],["$","span",null,{"className":"truncate","children":[["$","span",null,{"className":"sm:hidden","children":"🚨 Slop police"}],["$","span",null,{"className":"hidden sm:inline","children":"🚨 Slop police: we clean up vibe-coded apps."}]]}],["$","span",null,{"className":"flex shrink-0 items-center gap-1 font-semibold underline-offset-4 group-hover:underline","children":[["$","span",null,{"className":"sm:hidden","children":"Report it"}],["$","span",null,{"className":"hidden sm:inline","children":"Report your app"}],["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-right size-3.5 transition-transform group-hover:translate-x-0.5","aria-hidden":"true","children":[["$","path","1ays0h",{"d":"M5 12h14"}],["$","path","xquz4c",{"d":"m12 5 7 7-7 7"}],"$undefined"]}]]}]]}]}] 28:o1369,3a:[["$","header",null,{"className":"sticky top-0 z-50 border-b bg-background/90 backdrop-blur-md md:hidden","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-16 items-center justify-between","children":[["$","$L24",null,{"href":"/","className":"flex items-center gap-2 font-heading font-semibold text-sm tracking-[-0.02em]","children":[["$","svg",null,{"viewBox":"0 0 900 900","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"size-8","children":[["$","rect",null,{"x":"36","y":"344","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"148","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"456","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"148","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"36","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"764","y":"344","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"664","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"552","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"440","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"764","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"664","y":"456","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"440","y":"456","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"440","y":"568","width":"100","height":"100","fill":"currentColor"}]]}],["$","span",null,{"children":"shadcnregistry"}]]}],["$","div",null,{"className":"flex items-center gap-2","children":[["$","$L25",null,{}],["$","$L26",null,{}],["$","$L27",null,{"modal":true,"children":[["$","$L28",null,{"asChild":true,"children":["$","button",null,{"data-slot":"button","className":"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 size-9","aria-label":"Open navigation","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-menu","aria-hidden":"true","children":[["$","path","1lakjw",{"d":"M4 12h16"}],["$","path","19g7jn",{"d":"M4 18h16"}],["$","path","1o0s65",{"d":"M4 6h16"}],"$undefined"]}]}]}],["$","$L29",null,{"className":"w-[min(22rem,90vw)] rounded-l-xl p-6","children":[["$","$L2a",null,{"className":"text-lg","children":"Tools"}],["$","$L2b",null,{"className":"sr-only","children":"Navigate between registry tools."}],["$","$L2c",null,{"orientation":"vertical","closeOnNavigate":true,"className":"mt-4"}]]}]]}]]}]]}]}],["$","header",null,{"className":"sticky top-0 z-50 hidden border-b bg-background/90 backdrop-blur-md md:block","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex h-16 items-center gap-6","children":[["$","$L24",null,{"className":"flex min-w-32 select-none items-center gap-2 font-heading font-semibold text-sm tracking-[-0.02em]","href":"/","children":[["$","svg",null,{"viewBox":"0 0 900 900","fill":"none","xmlns":"http://www.w3.org/2000/svg","className":"size-8","children":[["$","rect",null,{"x":"36","y":"344","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"148","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"260","y":"456","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"148","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"36","y":"568","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"764","y":"344","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"664","y":"232","width":"100","height":"100","fill":"currentColor"}],["$","rect",null,{"x":"552","y":"232","width":"100","height":"100","fill":"currentColor"}],"$L4a","$L4b","$L4c","$L4d","$L4e"]}],"$L4f"]}],"$L50","$L51"]}]}]] 28:o4ac,3b:["$","main",null,{"className":"flex flex-1 flex-col","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex flex-1 flex-col","children":["$","$L41",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L42",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$e:props:children:props:children:1","forbidden":"$undefined","unauthorized":"$undefined"}]}]}] 3c:["$","$L41",null,{"parallelRouterKey":"modal","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L42",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}] 3d:["$","footer",null,{"className":"border-t text-muted-foreground text-xs","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl px-4 sm:px-6 flex items-center justify-end gap-4 py-5","children":[["$","$L24",null,{"href":"/legal/terms","children":"Terms of Service"}],["$","$L24",null,{"href":"/legal/privacy","children":"Privacy Policy"}]]}]}] 3e:["$","$L35",null,{}] 3f:["$","$L36",null,{}] 28:o2be,4a:["$","rect",null,{"x":"440","y":"232","width":"100","height":"100","fill":"currentColor"}] 4b:["$","rect",null,{"x":"764","y":"568","width":"100","height":"100","fill":"currentColor"}] 4c:["$","rect",null,{"x":"664","y":"456","width":"100","height":"100","fill":"currentColor"}] 4d:["$","rect",null,{"x":"440","y":"456","width":"100","height":"100","fill":"currentColor"}] 4e:["$","rect",null,{"x":"440","y":"568","width":"100","height":"100","fill":"currentColor"}] 4f:["$","span",null,{"children":"shadcnregistry"}] 50:["$","$L2c",null,{"className":"mx-auto"}] 51:["$","div",null,{"className":"flex min-w-32 items-center justify-end gap-2","children":[["$","$L25",null,{}],["$","$L26",null,{}]]}] 28:o7f,47:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}]] 28:o37,16:T8,registry1f:T8,registry16:T4,item21:300 1f:T4,item28:o4b,59:I[27201,["/_next/static/immutable/chunks/0vm3mw8xy2s8d.js"],"IconMark"] 28:o10ec,43:["$","div",null,{"className":"flex min-h-0 min-w-0 flex-1 flex-col","children":[["$","div",null,{"className":"pb-6","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5","children":[["$","$40","/",{"children":[false,["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1.5","children":["$","$L24",null,{"href":"/","children":"Registries","data-slot":"breadcrumb-link","className":"hover:text-foreground transition-colors","ref":null}]}]]}],["$","$40","/registrydirectory",{"children":[["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-chevron-right","aria-hidden":"true","children":[["$","path","mthhwq",{"d":"m9 18 6-6-6-6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1.5","children":["$","$L24",null,{"href":"/registrydirectory","children":"registrydirectory","data-slot":"breadcrumb-link","className":"hover:text-foreground transition-colors","ref":null}]}]]}],["$","$40","/registrydirectory/localmode-ai-ui-blocks-chat",{"children":[["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-chevron-right","aria-hidden":"true","children":[["$","path","mthhwq",{"d":"m9 18 6-6-6-6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1.5","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"text-foreground font-normal","children":"Localmode Ai/ui/blocks/chat"}]}]]}]]}]}],["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Registries\",\"item\":\"https://shadcnregistry.com/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"registrydirectory\",\"item\":\"https://shadcnregistry.com/registrydirectory\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Localmode Ai/ui/blocks/chat\",\"item\":\"https://shadcnregistry.com/registrydirectory/localmode-ai-ui-blocks-chat\"}]}"}}]]}],["$","header",null,{"className":"min-w-0 shrink-0","children":["$","div",null,{"className":"grid min-w-0 gap-3","children":[["$","div",null,{"className":"flex min-w-0 items-start justify-between gap-2 sm:gap-4","children":[["$","div",null,{"className":"flex min-w-0 flex-1 flex-wrap items-center gap-x-3 gap-y-2","children":[["$","h1",null,{"className":"min-w-0 break-words font-semibold text-2xl sm:text-3xl","children":"Localmode Ai/ui/blocks/chat"}],["$","span",null,{"data-slot":"badge","className":"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-blocks text-pink-400 size-3!","children":["$undefined","$L52","$L53","$undefined"]}],"block"]}]]}],"$L54"]}],"$L55"]}]}],"$L56","$L57","$L58"]}] 28:o8,45:null 28:oc60,49:[["$","title","0",{"children":"Localmode Ai/ui/blocks/chat – shadcn/ui Block by registrydirectory | shadcnregistry"}],["$","meta","1",{"name":"description","content":"[LocalMode] The flagship on-device chat: a 76-model multi-provider selector (transformers, WebLLM, wllama GGUF, LiteRT) with capability gating, vision attachments, DeepSeek-R1 reasoning display, semantic response caching, agent mode with tools, custom GGUF URLs, system prompt + parameter controls, and slash com Install the Localmode Ai/ui/blocks/chat shadcn/ui block from registrydirectory."}],["$","link","2",{"rel":"manifest","href":"/manifest.json","crossOrigin":"$undefined"}],["$","meta","3",{"name":"robots","content":"index, follow"}],["$","link","4",{"rel":"canonical","href":"https://shadcnregistry.com/registrydirectory/localmode-ai-ui-blocks-chat"}],["$","meta","5",{"property":"og:title","content":"Localmode Ai/ui/blocks/chat – shadcn/ui Block by registrydirectory"}],["$","meta","6",{"property":"og:description","content":"[LocalMode] The flagship on-device chat: a 76-model multi-provider selector (transformers, WebLLM, wllama GGUF, LiteRT) with capability gating, vision attachments, DeepSeek-R1 reasoning display, semantic response caching, agent mode with tools, custom GGUF URLs, system prompt + parameter controls, and slash com Install the Localmode Ai/ui/blocks/chat shadcn/ui block from registrydirectory."}],["$","meta","7",{"property":"og:url","content":"https://shadcnregistry.com/registrydirectory/localmode-ai-ui-blocks-chat"}],["$","meta","8",{"property":"og:site_name","content":"shadcnregistry"}],["$","meta","9",{"property":"og:locale","content":"en_US"}],["$","meta","10",{"property":"og:image","content":"https://shadcnregistry.com/registrydirectory/localmode-ai-ui-blocks-chat/opengraph-image"}],["$","meta","11",{"property":"og:type","content":"article"}],["$","meta","12",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","13",{"name":"twitter:title","content":"Localmode Ai/ui/blocks/chat – shadcn/ui Block by registrydirectory"}],["$","meta","14",{"name":"twitter:description","content":"[LocalMode] The flagship on-device chat: a 76-model multi-provider selector (transformers, WebLLM, wllama GGUF, LiteRT) with capability gating, vision attachments, DeepSeek-R1 reasoning display, semantic response caching, agent mode with tools, custom GGUF URLs, system prompt + parameter controls, and slash com Install the Localmode Ai/ui/blocks/chat shadcn/ui block from registrydirectory."}],["$","meta","15",{"name":"twitter:image","content":"https://shadcnregistry.com/registrydirectory/localmode-ai-ui-blocks-chat/opengraph-image"}],["$","link","16",{"rel":"icon","href":"/favicon.ico?favicon.0ggckis0s0yna.ico","sizes":"48x48","type":"image/x-icon"}],["$","link","17",{"rel":"icon","href":"/icon0.svg?icon0.25eth_vi9vax4.svg","sizes":"any","type":"image/svg+xml"}],["$","link","18",{"rel":"icon","href":"/icon1.png?icon1.2qsj88a3tgltl.png","sizes":"96x96","type":"image/png"}],["$","link","19",{"rel":"apple-touch-icon","href":"/apple-icon.png?apple-icon.1l19rp7u12rg6.png","sizes":"180x180","type":"image/png"}],["$","$L59","20",{}]] 28:ocba,5a:I[591164,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ActionButtons"] 5b:I[638118,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"Installation"] 52:["$","path","svg-0",{"d":"M14 4a1 1 0 0 1 1 -1h5a1 1 0 0 1 1 1v5a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1z"}] 53:["$","path","svg-1",{"d":"M3 14h12a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h3a2 2 0 0 1 2 2v12"}] 54:["$","div",null,{"className":"shrink-0 pt-0.5","children":["$","$L5a",null,{"item":{"id":"@registrydirectory/localmode-ai-ui-blocks-chat","name":"localmode-ai/ui/blocks/chat","description":"[LocalMode] The flagship on-device chat: a 76-model multi-provider selector (transformers, WebLLM, wllama GGUF, LiteRT) with capability gating, vision attachments, DeepSeek-R1 reasoning display, semantic response caching, agent mode with tools, custom GGUF URLs, system prompt + parameter controls, and slash com","type":"registry:block","slug":"localmode-ai-ui-blocks-chat","source":"https://registry.directory/r/localmode-ai/ui/blocks/chat.json","namespace":"@registrydirectory","upstreamName":"localmode-ai/ui/blocks/chat"}}]}] 55:["$","p",null,{"className":"max-w-3xl break-words text-muted-foreground text-sm leading-6","children":"[LocalMode] The flagship on-device chat: a 76-model multi-provider selector (transformers, WebLLM, wllama GGUF, LiteRT) with capability gating, vision attachments, DeepSeek-R1 reasoning display, semantic response caching, agent mode with tools, custom GGUF URLs, system prompt + parameter controls, and slash com"}] 56:["$","div",null,{"className":"mt-3 shrink-0","children":["$","$L5b",null,{"sourceUrl":"https://registry.directory/r/localmode-ai/ui/blocks/chat.json","itemId":"@registrydirectory/localmode-ai-ui-blocks-chat"}]}] 28:oe8a,57:["$","div",null,{"className":"mt-4 shrink-0","children":["$","a",null,{"href":"https://link.jln.dev/shadcnblocks","target":"_blank","rel":"sponsored noopener noreferrer","data-umami-event":"affiliate-banner-click","data-umami-event-namespace":"@shadcnblocks","data-umami-event-surface":"item-page","data-umami-event-campaign":"item-page-banner","className":"group relative block w-full max-w-lg overflow-hidden rounded-lg py-0.5 text-left focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-amber-400/60","children":[["$","span",null,{"aria-hidden":"true","className":"absolute right-[-250%] bottom-[-11px] h-1/2 w-[300%] animate-star-movement-bottom rounded-full","style":{"background":"radial-gradient(circle, #fcd34d, transparent 10%)","animationDuration":"6s"}}],["$","span",null,{"aria-hidden":"true","className":"absolute top-[-10px] left-[-250%] h-1/2 w-[300%] animate-star-movement-top rounded-full","style":{"background":"radial-gradient(circle, #fcd34d, transparent 10%)","animationDuration":"6s"}}],["$","span",null,{"className":"relative flex items-center justify-between gap-4 rounded-[calc(var(--radius)-1px)] border bg-background p-4","children":[["$","span",null,{"className":"flex min-w-0 items-center gap-3","children":[["$","svg",null,{"viewBox":"0 0 1200 1200","xmlns":"http://www.w3.org/2000/svg","className":"size-9 shrink-0","fill":"currentColor","aria-hidden":"true","children":["$","g",null,{"children":[["$","path",null,{"d":"m700.78 88.312-39.328-22.547v186.94l39.328 22.828z"}],["$","path",null,{"d":"m780 134.39-39.375-22.781v187.18l39.375 22.594z"}],["$","path",null,{"d":"m858.47 180.24-39.328-22.547v186.94l39.328 22.594z"}],["$","path",null,{"d":"m185.53 360.71 39.328 22.594v-133.69l-39.328 22.547z"}],["$","path",null,{"d":"m146.16 337.92v-42.469l-37.219 21.328z"}],["$","path",null,{"d":"m1095.4 317.29-39.141-22.594v45.375l-39.375 22.547v-90.469l-39.094-22.547v135.1l-39.375 22.594v-181.22l-40.078-23.297v187.22l35.297 20.625v378.74l-1.9219 1.1719-33.375-19.172v38.625l-39.844 22.547v-85.172l-39.328-23.297v131.29l-39.141 23.25v-177.84l-39.375-23.25v223.69l-39.844 22.547v-269.53l-39.328-23.297v315.37l-39.375 23.531v-362.16l-19.219-12.75 0.75-376.08 18.469 11.297v-186.94l-20.625-12-16.594 9.3281v187.69l-39.797 22.547v-186.94l-39.375 22.547v186.98l-39.375 22.781v-186.47l-39.094 22.547v186.47l-40.078 22.594v-186.24l-39.141 23.25v185.76l-39.375 23.297v-186.52l-43.922 25.922v179.06l6 3.375 1.4531 381.32 36.469 21.375v-42.469l39.375-23.297v89.062l39.141 22.781v-135.14l40.078-24v181.69l39.094 23.297v-228.24l39.375-23.297v274.08l39.375 22.828v-320.44l39.797-23.25v366.94l18 10.594v-0.75 188.39l493.22-284.86 0.70312-568.55z"}]]}]}],["$","span",null,{"className":"min-w-0","children":[["$","span",null,{"className":"block font-semibold text-base leading-snug","children":"Premium blocks for shadcn/ui"}],["$","span",null,{"className":"mt-0.5 block text-muted-foreground text-xs","children":"Shadcnblocks.com · Affiliate"}]]}]]}],["$","span",null,{"className":"inline-flex h-8 shrink-0 items-center gap-1.5 rounded-md bg-linear-to-b from-amber-200 to-amber-400 px-3 font-medium text-amber-950 text-sm shadow-sm transition-[filter] group-hover:brightness-110","children":[["$","span",null,{"className":"sr-only sm:not-sr-only","children":"Explore"}],["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-up-right size-4","aria-hidden":"true","children":[["$","path","1tivn9",{"d":"M7 7h10v10"}],["$","path","1vkiza",{"d":"M7 17 17 7"}],"$undefined"]}]]}]]}]]}]}] 28:o67e,58:["$","$4",null,{"fallback":["$","div",null,{"className":"mt-3 flex min-h-0 flex-1 flex-col gap-3 motion-reduce:[&_*]:animate-none","aria-hidden":true,"children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-8 shrink-0"}],["$","div",null,{"className":"flex flex-col overflow-hidden border bg-muted/30 h-[70svh] min-h-80 rounded-lg","children":[["$","div",null,{"className":"flex h-11 shrink-0 items-center gap-3 border-b px-3","children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-6 w-16"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-40"}]]}],["$","div",null,{"className":"flex min-h-0 flex-1","children":[["$","div",null,{"className":"hidden w-[23%] flex-col gap-3 border-r p-4 md:flex","children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-2/3"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-1/2"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-3/4"}]]}],["$","div",null,{"className":"flex flex-1 flex-col gap-4 p-6","children":[["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-2/3"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-1/2"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-3/4"}],["$","div",null,{"data-slot":"skeleton","className":"bg-accent animate-pulse rounded-md h-4 w-1/3"}]]}]]}]]}]]}],"children":"$L5c"}] 28:o101e,5c:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@localmode/core",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40localmode%2Fcore","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@localmode/core"}]]}]}],["$","li","@localmode/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40localmode%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@localmode/react"}]]}]}],["$","li","@localmode/transformers",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40localmode%2Ftransformers","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@localmode/transformers"}]]}]}],["$","li","@localmode/webllm",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40localmode%2Fwebllm","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@localmode/webllm"}]]}]}],["$","li","@localmode/wllama",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40localmode%2Fwllama","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],"$L5d"]}]}],"$L5e","$L5f"]}],"$L60"]}],null]}],"$L61"]}] 28:occ4,62:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 63:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 5d:["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@localmode/wllama"}] 5e:["$","li","@localmode/litert",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40localmode%2Flitert","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@localmode/litert"}]]}]}] 5f:["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}] 28:o58a,60:["$","$L62",null,{"namespace":"@registrydirectory","registryDependencies":["https://localmode.ai/r/ui/lib/utils.json","https://localmode.ai/r/ui/conversation/actions.json","https://localmode.ai/r/ui/conversation/agent-step-timeline.json","https://localmode.ai/r/ui/conversation/branch.json","https://localmode.ai/r/ui/local-first/browser-compat-card.json","https://localmode.ai/r/ui/local-first/cache-badge.json","https://localmode.ai/r/ui/local-first/capability-gate.json","https://localmode.ai/r/ui/local-first/context-usage-meter.json","https://localmode.ai/r/ui/conversation/conversation.json","https://localmode.ai/r/ui/conversation/message.json","https://localmode.ai/r/ui/local-first/model-loading-panel.json","https://localmode.ai/r/ui/local-first/model-selector.json","https://localmode.ai/r/ui/local-first/network-badge.json","https://localmode.ai/r/ui/input-controls/option-list.json","https://localmode.ai/r/ui/input-controls/parameter-slider.json","https://localmode.ai/r/ui/conversation/prompt-input.json","https://localmode.ai/r/ui/conversation/prompt-input-attachments.json","https://localmode.ai/r/ui/local-first/provider-fallback-badge.json","https://localmode.ai/r/ui/conversation/reasoning.json","https://localmode.ai/r/ui/conversation/response.json","https://localmode.ai/r/ui/local-first/semantic-cache-status-bar.json","https://localmode.ai/r/ui/input-controls/slash-command-palette.json"]}] 28:oa,64:T1568f,28:o1568f,'use client'; /** * @file chat.tsx * @description CHAT block body (`/blocks/chat`) — the flagship multi-provider chat surface (transformers / webllm / wllama / litert) with vision attachments, reasoning, semantic response cache, and agent mode. */ import { Suspense, useEffect, useRef, useState, type RefObject } from 'react'; import { useSearchParams } from 'next/navigation'; import { Bot, Boxes, FileJson, FileSearch, Link2, Loader2, PenLine, RefreshCw, Sparkles, TriangleAlert, Trash2, Wrench, X, Zap, } from 'lucide-react'; import { downloadBlob, getTextContent, useAgent, useChat, useModelLoad, useSemanticCache, type UseModelLoadReturn, } from '@localmode/react'; import { embed, globalEventBus, isWebGPUSupported, semanticCacheMiddleware, wrapLanguageModel, type CacheStats, type ContentPart, type EmbeddingModel, type LanguageModel, type ObjectSchema, type SemanticCache, type SummarizationModel, type ToolDefinition, } from '@localmode/core'; import { transformers, TRANSFORMERS_LLM_MODELS, isModelCached as transformersIsModelCached, clearModelCache as transformersClearModelCache, } from '@localmode/transformers'; import { webllm, WEBLLM_MODELS, isModelCached as webllmIsModelCached, deleteModelCache as webllmDeleteModelCache, } from '@localmode/webllm'; import { wllama, WLLAMA_MODELS, getModelCategory, isCrossOriginIsolated, isModelCached as wllamaIsModelCached, deleteModelCache as wllamaDeleteModelCache, checkGGUFBrowserCompat, parseGGUFMetadata, type WllamaModelEntry, type GGUFBrowserCompat, type GGUFMetadata, } from '@localmode/wllama'; import { litert, LITERT_MODELS, isModelCached as litertIsModelCached, deleteModelCache as litertDeleteModelCache, type LiteRTModelEntry, } from '@localmode/litert'; import { Conversation, ConversationContent, ConversationEmptyState, ConversationScrollAnchor, ConversationScrollButton, } from '@/components/conversation'; import { Message, MessageAvatar, MessageContent, type MessagePart, } from '@/components/message'; import { PromptInput, PromptInputSubmit, PromptInputTextarea, PromptInputTools, type PromptAttachment, } from '@/components/prompt-input'; import { PromptInputAttachments } from '@/components/prompt-input-attachments'; import { Response } from '@/components/response'; import { Branch, BranchMessages, BranchNext, BranchPage, BranchPrevious, BranchSelector, } from '@/components/branch'; import { Actions, CopyAction, RegenerateAction } from '@/components/actions'; import { ModelLoadingPanel } from '@/components/model-loading-panel'; import { Context, ContextTrigger } from '@/components/context-usage-meter'; import { ModelSelector, type ModelBackend, type SelectableModel } from '@/components/model-selector'; import { CapabilityGate } from '@/components/capability-gate'; import { ProviderFallbackBadge } from '@/components/provider-fallback-badge'; import { NetworkBadge } from '@/components/network-badge'; import { CacheBadge } from '@/components/cache-badge'; import { SemanticCacheStatusBar } from '@/components/semantic-cache-status-bar'; import { Reasoning, ReasoningContent, ReasoningTrigger, } from '@/components/reasoning'; import { AgentStepTimeline, type AgentFinishReason, type AgentStep as TimelineAgentStep, } from '@/components/agent-step-timeline'; import { ParameterSlider } from '@/components/parameter-slider'; import { SlashCommandPalette, type SlashCommand, } from '@/components/slash-command-palette'; import { BrowserCompatCard } from '@/components/browser-compat-card'; import { OptionList, type Option } from '@/components/option-list'; import { cn } from '@/lib/utils'; export type ChatBackend = 'transformers' | 'webllm' | 'wllama' | 'litert'; export type ChatModelCategory = 'tiny' | 'small' | 'medium' | 'large'; export interface ChatModelEntry { id: string; backend: ChatBackend; name: string; sizeBytes?: number; sizeLabel: string; category: ChatModelCategory; contextLength?: number; description?: string; supportsVision?: boolean; supportsTools?: boolean; supportsReasoning?: boolean; requiresWebGPU?: boolean; mmprojUrl?: string; } export interface CreateChatModelOptions { backend: ChatBackend; modelId: string; onProgress?: (p: unknown) => void; device?: 'webgpu' | 'wasm'; customUrl?: string; mmprojUrl?: string; enableReasoning?: boolean; } interface WebLLMCatalogEntry { name: string; contextLength: number; sizeBytes: number; size: string; description: string; vision?: boolean; } const WLLAMA_ENTRIES = WLLAMA_MODELS as Record; const WEBLLM_ENTRIES = WEBLLM_MODELS as Record; const LITERT_ENTRIES = LITERT_MODELS as Record; let cachedCatalog: ChatModelEntry[] | null = null; export function getChatCatalog(): ChatModelEntry[] { if (cachedCatalog) return cachedCatalog; const entries: ChatModelEntry[] = []; for (const [id, entry] of Object.entries(TRANSFORMERS_LLM_MODELS)) { entries.push({ id, backend: 'transformers', name: entry.name, sizeBytes: entry.sizeBytes, sizeLabel: entry.size, category: getModelCategory(entry.sizeBytes), contextLength: entry.contextLength, description: entry.description, supportsVision: entry.vision === true ? true : undefined, }); } for (const [id, entry] of Object.entries(WEBLLM_ENTRIES)) { entries.push({ id, backend: 'webllm', name: entry.name, sizeBytes: entry.sizeBytes, sizeLabel: entry.size, category: getModelCategory(entry.sizeBytes), contextLength: entry.contextLength, description: entry.description, supportsVision: entry.vision === true ? true : undefined, }); } for (const [id, entry] of Object.entries(WLLAMA_ENTRIES)) { if (entry.isEmbeddingModel || entry.isRerankerModel) continue; entries.push({ id, backend: 'wllama', name: entry.name, sizeBytes: entry.sizeBytes, sizeLabel: entry.size, category: getModelCategory(entry.sizeBytes), contextLength: entry.contextLength, description: entry.description, supportsVision: entry.vision === true ? true : undefined, supportsTools: entry.supportsToolCalling === true ? true : undefined, supportsReasoning: entry.supportsReasoning === true ? true : undefined, mmprojUrl: entry.mmprojUrl, }); } for (const [id, entry] of Object.entries(LITERT_ENTRIES)) { entries.push({ id, backend: 'litert', name: entry.name, sizeBytes: entry.sizeBytes, sizeLabel: entry.size, category: getModelCategory(entry.sizeBytes), contextLength: entry.contextLength, description: entry.description, requiresWebGPU: entry.requiresWebGPU === true ? true : undefined, }); } cachedCatalog = entries; return entries; } export function inferBackendFromModelId(id: string): ChatBackend | null { if (id in TRANSFORMERS_LLM_MODELS) return 'transformers'; if (id in WEBLLM_ENTRIES) return 'webllm'; if (id in WLLAMA_ENTRIES) return 'wllama'; if (id in LITERT_ENTRIES) return 'litert'; const lower = id.toLowerCase(); if (lower.endsWith('.litertlm')) return 'litert'; if (lower.includes('.gguf') || lower.includes('-gguf')) return 'wllama'; if (id.endsWith('-MLC')) return 'webllm'; if (lower.includes('onnx')) return 'transformers'; return null; } export function createChatLanguageModel(opts: CreateChatModelOptions): LanguageModel { const { backend, modelId, onProgress, device, customUrl, mmprojUrl, enableReasoning } = opts; switch (backend) { case 'transformers': return transformers.languageModel(modelId, { onProgress, ...(device ? { device } : {}) }); case 'webllm': return webllm.languageModel(modelId, { onProgress }); case 'wllama': { const effectiveMmproj = mmprojUrl ?? WLLAMA_ENTRIES[modelId]?.mmprojUrl; return wllama.languageModel(modelId, { onProgress, ...(customUrl ? { modelUrl: customUrl } : {}), ...(effectiveMmproj ? { mmprojUrl: effectiveMmproj } : {}), ...(enableReasoning ? { reasoning: true, reasoningFormat: 'none' as const } : {}), }); } case 'litert': return litert.languageModel(modelId, { onProgress }); } } export function isChatModelCached(backend: ChatBackend, modelId: string): Promise { switch (backend) { case 'transformers': return transformersIsModelCached(modelId); case 'webllm': return webllmIsModelCached(modelId); case 'wllama': return wllamaIsModelCached(modelId); case 'litert': return litertIsModelCached(modelId); } } export async function deleteChatModelCache(backend: ChatBackend, modelId: string): Promise { switch (backend) { case 'transformers': await transformersClearModelCache(); return; case 'webllm': await webllmDeleteModelCache(modelId); return; case 'wllama': await wllamaDeleteModelCache(modelId); return; case 'litert': await litertDeleteModelCache(modelId); return; } } export async function disposeChatModel(backend: ChatBackend, model: LanguageModel): Promise { const disposable = model as LanguageModel & { unload?: () => Promise }; if (typeof disposable.unload !== 'function') { return; } try { await disposable.unload(); } catch (err) { console.warn(`[chat-block] ${backend} model unload failed`, err); } } export const AGENT_SYSTEM_PROMPT = 'You are a helpful assistant with access to tools. Use the available tools to answer questions accurately. ' + 'Always use the search_knowledge_base tool before answering factual questions. ' + 'Use the calculate tool for any math. ' + 'Use the summarize tool to shorten long text. ' + 'After gathering information, provide a clear and comprehensive final answer.'; interface KnowledgeBaseArticle { id: string; title: string; content: string; category: string; } const AGENT_KNOWLEDGE_BASE: readonly KnowledgeBaseArticle[] = [ { id: 'qc-1', title: 'Introduction to Quantum Computing', content: 'Quantum computing uses quantum bits (qubits) that can exist in superposition, representing both 0 and 1 simultaneously. This enables quantum computers to solve certain problems exponentially faster than classical computers. Key concepts include entanglement, where qubits become correlated, and quantum gates that manipulate qubit states. Current quantum computers have 50-1000+ qubits but are error-prone.', category: 'quantum-computing', }, { id: 'qc-2', title: 'Quantum Computing Applications', content: 'Quantum computing has promising applications in cryptography (breaking and creating encryption), drug discovery (simulating molecular interactions), optimization problems (logistics, finance), and machine learning (quantum neural networks). Google demonstrated quantum supremacy in 2019, and IBM offers cloud quantum computing services.', category: 'quantum-computing', }, { id: 'bio-1', title: 'Photosynthesis Process', content: 'Photosynthesis converts sunlight, water, and CO2 into glucose and oxygen. It occurs in chloroplasts using chlorophyll pigments. The light-dependent reactions in the thylakoid membranes capture light energy to produce ATP and NADPH. The Calvin cycle in the stroma uses these to fix CO2 into glucose. Efficiency is approximately 3-6%.', category: 'biology', }, { id: 'bio-2', title: 'CRISPR Gene Editing', content: 'CRISPR-Cas9 is a gene editing tool adapted from bacterial immune systems. It uses a guide RNA to direct the Cas9 enzyme to a specific DNA sequence, where it makes a precise cut. Applications include treating genetic diseases (sickle cell, muscular dystrophy), creating disease-resistant crops, and studying gene function.', category: 'genetics', }, { id: 'ai-1', title: 'Machine Learning Fundamentals', content: 'Machine learning enables computers to learn from data without explicit programming. Supervised learning uses labeled data for classification and regression. Unsupervised learning finds patterns in unlabeled data. Deep learning uses neural networks with many layers for complex pattern recognition in images, text, and audio.', category: 'artificial-intelligence', }, { id: 'ai-2', title: 'Large Language Models', content: 'Large language models (LLMs) are neural networks trained on vast text corpora to generate and understand human language. They use the transformer architecture with self-attention mechanisms. Modern LLMs can perform translation, summarization, code generation, and reasoning. Running LLMs locally in the browser is now possible via WebGPU and WASM.', category: 'artificial-intelligence', }, { id: 'env-1', title: 'Climate Change and Carbon Cycle', content: 'The carbon cycle describes the movement of carbon through the atmosphere, oceans, soil, and living organisms. Human activities, particularly burning fossil fuels, have increased atmospheric CO2 from 280ppm (pre-industrial) to over 420ppm. This enhanced greenhouse effect is causing global temperatures to rise, with consequences including sea level rise, extreme weather, and ecosystem disruption.', category: 'environment', }, { id: 'space-1', title: 'Mars Exploration', content: 'Mars has been explored by numerous spacecraft including rovers (Curiosity, Perseverance), orbiters, and landers. Evidence suggests Mars once had liquid water and a thicker atmosphere. Current research focuses on searching for signs of ancient microbial life, studying Martian geology, and preparing for future human missions. SpaceX and NASA plan crewed missions in the 2030s-2040s.', category: 'space', }, ]; interface SearchParams { query: string; maxResults: number; } const searchParameters: ObjectSchema = { parse: (value: unknown): SearchParams => { if (typeof value !== 'object' || value === null) { throw new Error('Expected an object with a "query" field'); } const obj = value as Record; if (typeof obj.query !== 'string' || !obj.query) { throw new Error('"query" must be a non-empty string'); } return { query: obj.query, maxResults: typeof obj.maxResults === 'number' ? obj.maxResults : 3, }; }, jsonSchema: { type: 'object', properties: { query: { type: 'string', description: 'The search query' }, maxResults: { type: 'number', description: 'Maximum results to return (default: 3)' }, }, required: ['query'], }, description: 'Knowledge-base search parameters', }; interface CalculateParams { expression: string; } const calculateParameters: ObjectSchema = { parse: (value: unknown): CalculateParams => { if (typeof value !== 'object' || value === null) { throw new Error('Expected an object with an "expression" field'); } const obj = value as Record; if (typeof obj.expression !== 'string' || !obj.expression) { throw new Error('"expression" must be a non-empty string'); } return { expression: obj.expression }; }, jsonSchema: { type: 'object', properties: { expression: { type: 'string', description: 'Mathematical expression to evaluate' }, }, required: ['expression'], }, description: 'Calculation parameters', }; interface SummarizeParams { text: string; maxLength: number; } const summarizeParameters: ObjectSchema = { parse: (value: unknown): SummarizeParams => { if (typeof value !== 'object' || value === null) { throw new Error('Expected an object with a "text" field'); } const obj = value as Record; if (typeof obj.text !== 'string' || !obj.text) { throw new Error('"text" must be a non-empty string'); } return { text: obj.text, maxLength: typeof obj.maxLength === 'number' ? obj.maxLength : 100, }; }, jsonSchema: { type: 'object', properties: { text: { type: 'string', description: 'The text to summarize' }, maxLength: { type: 'number', description: 'Maximum summary length in tokens (default: 100)' }, }, required: ['text'], }, description: 'Summarization parameters', }; let summarizerModel: SummarizationModel | null = null; const searchKnowledgeBaseTool: ToolDefinition = { name: 'search_knowledge_base', description: 'Search for information on a topic. Returns relevant article snippets from a built-in knowledge base covering quantum computing, biology, genetics, AI, climate, and space.', parameters: searchParameters, execute: async (params) => { const { query, maxResults } = searchParameters.parse(params); const queryWords = query.toLowerCase().split(/\s+/); const scored = AGENT_KNOWLEDGE_BASE.map((article) => { const text = `${article.title} ${article.content}`.toLowerCase(); const score = queryWords.reduce((sum, word) => sum + (text.includes(word) ? 1 : 0), 0); return { article, score }; }); const results = scored .filter((s) => s.score > 0) .sort((a, b) => b.score - a.score) .slice(0, maxResults) .map((s) => s.article); if (results.length === 0) { return 'No relevant articles found. Try different search terms.'; } return results.map((r) => `[${r.title}] (${r.category})\n${r.content}`).join('\n\n'); }, }; const calculateTool: ToolDefinition = { name: 'calculate', description: 'Evaluate a mathematical expression. Returns the numeric result.', parameters: calculateParameters, execute: async (params) => { const { expression } = calculateParameters.parse(params); try { const sanitized = expression.replace(/[^0-9+\-*/().%\s]/g, ''); if (!sanitized.trim()) { return 'Invalid expression. Use numbers and operators: + - * / ( ) %'; } const result = new Function(`"use strict"; return (${sanitized});`)() as unknown; if (typeof result !== 'number' || !Number.isFinite(result)) { return `Could not evaluate: ${expression}`; } return String(result); } catch { return `Could not evaluate: ${expression}`; } }, }; const summarizeTool: ToolDefinition = { name: 'summarize', description: 'Summarize a block of text into a shorter version.', parameters: summarizeParameters, execute: async (params, { abortSignal }) => { const { text, maxLength } = summarizeParameters.parse(params); try { const { summarize } = await import('@localmode/core'); let model = summarizerModel; if (!model) { const { transformers } = await import('@localmode/transformers'); model = transformers.summarizer('Xenova/distilbart-cnn-6-6'); summarizerModel = model; } const result = await summarize({ model, text, maxLength, abortSignal }); return result.summary; } catch (err) { const msg = err instanceof Error ? err.message : String(err); return `Summarization failed: ${msg}`; } }, }; export const AGENT_TOOLS: ToolDefinition[] = [searchKnowledgeBaseTool, calculateTool, summarizeTool]; export const DEFAULT_SYSTEM_PROMPT = 'You are a helpful assistant.'; export interface SystemPromptPreset { id: string; label: string; description: string; prompt: string; } export const SYSTEM_PROMPT_PRESETS: readonly SystemPromptPreset[] = [ { id: 'default', label: 'Helpful assistant', description: 'Balanced, general-purpose default', prompt: DEFAULT_SYSTEM_PROMPT, }, { id: 'concise', label: 'Concise answers', description: 'Short, direct replies, no filler', prompt: 'You are a helpful assistant. Keep every answer short and direct, at most three sentences unless the user explicitly asks for more detail.', }, { id: 'coding', label: 'Coding assistant', description: 'Code-first answers with working examples', prompt: 'You are an expert programming assistant. Answer with working, runnable code examples first, then a brief explanation. Prefer modern idioms and point out pitfalls.', }, { id: 'teacher', label: 'Step-by-step teacher', description: 'Patient explanations that build up from basics', prompt: 'You are a patient teacher. Explain concepts step by step, starting from first principles, using simple language and one concrete example per concept. Check understanding before moving on.', }, ]; export interface SystemPromptEditorProps { value: string; onChange: (v: string) => void; } export function SystemPromptEditor({ value, onChange }: SystemPromptEditorProps) { const presetOptions: Option[] = SYSTEM_PROMPT_PRESETS.map((preset) => ({ id: preset.id, label: preset.label, description: preset.description, })); const selectedId = SYSTEM_PROMPT_PRESETS.find((preset) => preset.prompt === value)?.id; const handlePresetSelect = (option: Option) => { const preset = SYSTEM_PROMPT_PRESETS.find((p) => p.id === option.id); if (preset) onChange(preset.prompt); }; return (

System prompt

onChange(e.target.value)}
          rows={4}
          placeholder={DEFAULT_SYSTEM_PROMPT}
          spellCheck={false}
          className="min-h-24 w-full resize-y rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs outline-none placeholder:text-muted-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50"
        />
      </label>
      <div>
        <OptionList
          prompt="Presets"
          options={presetOptions}
          selectedId={selectedId}
          onSelect={handlePresetSelect}
        />
      </div>
    </div>
  );
}

export interface CustomModelPanelProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  initialUrl?: string;
  initialMmproj?: string;
  onLoad: (opts: { url: string; mmproj?: string }) => void;
  loading?: boolean;
}

const GB = 1024 * 1024 * 1024;

function toGB(bytes: number): number {
  return Math.round((bytes / GB) * 10) / 10;
}

function formatParams(count: number): string {
  if (count >= 1_000_000_000) return `${(count / 1_000_000_000).toFixed(1)}B`;
  return `${Math.round(count / 1_000_000)}M`;
}

function nameFromUrl(url: string): string {
  const last = url.split('/').pop() ?? url;
  return last.replace(/\.gguf$/i, '') || url;
}

export function CustomModelPanel({
  open,
  onOpenChange,
  initialUrl,
  initialMmproj,
  onLoad,
  loading = false,
}: CustomModelPanelProps) {
  const [url, setUrl] = useState(initialUrl ?? '');
  const [mmproj, setMmproj] = useState(initialMmproj ?? '');
  const [inspecting, setInspecting] = useState(false);
  const [metadata, setMetadata] = useState<GGUFMetadata | null>(null);
  const [compat, setCompat] = useState<GGUFBrowserCompat | null>(null);
  const [error, setError] = useState<string | null>(null);

const abortRef = useRef<AbortController | null>(null);
  const autoInspectedRef = useRef(false);

const runInspect = async (target: string) => {
    const trimmed = target.trim();
    if (!trimmed) return;

abortRef.current?.abort();
    const controller = new AbortController();
    abortRef.current = controller;

setInspecting(true);
    setMetadata(null);
    setCompat(null);
    setError(null);

try {
      const meta = await parseGGUFMetadata(trimmed, { abortSignal: controller.signal });
      const verdict = await checkGGUFBrowserCompat(meta, { abortSignal: controller.signal });
      if (controller.signal.aborted) return;
      setMetadata(meta);
      setCompat(verdict);
    } catch (err) {
      if (controller.signal.aborted) return;
      setError(err instanceof Error ? err.message : String(err));
    } finally {
      if (abortRef.current === controller) {
        setInspecting(false);
      }
    }
  };

useEffect(() => {
    if (!open || !initialUrl || autoInspectedRef.current) return;
    autoInspectedRef.current = true;
    setUrl(initialUrl);
    if (initialMmproj) setMmproj(initialMmproj);
    void runInspect(initialUrl);
  }, [open, initialUrl, initialMmproj]);

useEffect(() => {
    return () => abortRef.current?.abort();
  }, []);

if (!open) return null;

const handleUrlChange = (next: string) => {
    setUrl(next);
    setMetadata(null);
    setCompat(null);
    setError(null);
  };

const inspected = metadata !== null && compat !== null;
  const canRun = compat?.canRun === true;
  const loadDisabled = loading || inspecting || !inspected;

const handleLoad = () => {
    const trimmed = url.trim();
    if (!trimmed || loadDisabled) return;
    const trimmedMmproj = mmproj.trim();
    onLoad({ url: trimmed, mmproj: trimmedMmproj ? trimmedMmproj : undefined });
  };

return (
    <section
      aria-label="Load a custom GGUF model"
      className="flex w-full flex-col gap-4 rounded-xl border border-border bg-card p-4 text-card-foreground shadow-sm"
    >
      <div className="flex items-start justify-between gap-2">
        <div className="flex min-w-0 flex-col gap-0.5">
          <h2 className="flex items-center gap-1.5 text-sm font-semibold">
            <Link2 className="size-4" aria-hidden="true" />
            Custom GGUF model
          </h2>
          <p className="text-xs text-muted-foreground">
            Paste any GGUF file URL. Inspect fetches only a ~4KB header, no model download until
            you click Load.
          </p>
        </div>
        <button
          type="button"
          aria-label="Close custom model panel"
          onClick={() => onOpenChange(false)}
          className="rounded-md p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
        >
          <X className="size-4" aria-hidden="true" />
        </button>
      </div>

<div className="flex flex-col gap-2">
        <div className="flex gap-2">
          <input
            type="url"
            aria-label="GGUF model URL"
            value={url}
            onChange={(e) => handleUrlChange(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === 'Enter' && url.trim() && !inspecting) void runInspect(url);
            }}
            placeholder="https://huggingface.co/…/resolve/main/model-Q4_K_M.gguf"
            spellCheck={false}
            className="h-9 min-w-0 flex-1 rounded-md border border-input bg-transparent px-3 text-sm shadow-xs outline-none placeholder:text-muted-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50"
          />
          <button
            type="button"
            onClick={() => void runInspect(url)}
            disabled={!url.trim() || inspecting}
            className="inline-flex h-9 shrink-0 items-center gap-1.5 rounded-md border border-border bg-secondary px-3 text-sm font-medium text-secondary-foreground transition-colors hover:bg-secondary/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
          >
            {inspecting ? (
              <Loader2 className="size-4 animate-spin" aria-hidden="true" />
            ) : (
              <FileSearch className="size-4" aria-hidden="true" />
            )}
            {inspecting ? 'Inspecting…' : 'Inspect'}
          </button>
        </div>

<input
          type="url"
          aria-label="mmproj (vision projector) URL"
          value={mmproj}
          onChange={(e) => setMmproj(e.target.value)}
          placeholder="Optional mmproj (vision projector) GGUF URL"
          spellCheck={false}
          className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-sm shadow-xs outline-none placeholder:text-muted-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50"
        />
      </div>

{error && (
        <div
          role="alert"
          aria-label="Custom model error"
          className="flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive"
        >
          <TriangleAlert className="mt-0.5 size-3.5 shrink-0" aria-hidden="true" />
          <span className="break-words [overflow-wrap:anywhere]">{error}</span>
        </div>
      )}

{metadata && (
        <dl
          className="grid grid-cols-2 gap-2 text-xs sm:grid-cols-4"
        >
          {(
            [
              ['Architecture', metadata.architecture],
              ['Parameters', formatParams(metadata.parameterCount)],
              ['Quantization', metadata.quantization],
              ['Context', metadata.contextLength.toLocaleString()],
            ] as const
          ).map(([label, value]) => (
            <div
              key={label}
              className="flex flex-col gap-0.5 rounded-md border border-border bg-background px-2.5 py-1.5"
            >
              <dt className="text-muted-foreground">{label}</dt>
              <dd className="truncate font-medium">{value}</dd>
            </div>
          ))}
        </dl>
      )}

{metadata && compat && (
        <div role="status" aria-label="Compatibility verdict">
          <BrowserCompatCard
            className="max-w-none"
            modelName={metadata.modelName ?? nameFromUrl(url)}
            requiredGB={toGB(compat.estimatedRAM)}
            deviceGB={compat.deviceRAM !== null ? toGB(compat.deviceRAM) : 4}
            availableStorageGB={
              compat.availableStorage !== null ? toGB(compat.availableStorage) : undefined
            }
            crossOriginIsolated={compat.hasCORS}
            estimatedSpeed={compat.estimatedSpeed}
            warnings={[...compat.warnings, ...compat.recommendations]}
            canRun={compat.canRun}
          />
        </div>
      )}

<div className="flex flex-col gap-1.5">
        <button
          type="button"
          onClick={handleLoad}
          disabled={loadDisabled}
          className={cn(
            'inline-flex h-9 items-center justify-center gap-1.5 rounded-md px-4 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
            inspected && !canRun
              ? 'border border-destructive/40 bg-destructive/10 text-destructive hover:bg-destructive/20'
              : 'bg-primary text-primary-foreground hover:bg-primary/90',
          )}
        >
          {loading && <Loader2 className="size-4 animate-spin" aria-hidden="true" />}
          {loading ? 'Loading model…' : inspected && !canRun ? 'Load anyway' : 'Load model'}
        </button>
        {inspected && !canRun && !loading && (
          <p className="text-xs text-muted-foreground">
            The compatibility check estimates this model will not run here - loading anyway may
            crash the tab. The estimate is a heuristic; you keep the final say.
          </p>
        )}
        {!inspected && !error && !inspecting && (
          <p className="text-xs text-muted-foreground">
            Inspect the URL first - Load unlocks after a successful metadata check.
          </p>
        )}
      </div>
    </section>
  );
}

const DEFAULT_MODEL_ID = 'onnx-community/granite-4.0-350m-ONNX-web';

const LS_MODEL = 'localmode-blocks-chat:model';
const LS_SYSTEM_PROMPT = 'localmode-blocks-chat:system-prompt';
const LS_TEMPERATURE = 'localmode-blocks-chat:temperature';
const LS_MAX_TOKENS = 'localmode-blocks-chat:max-tokens';
const PERSIST_PREFIX = 'localmode-blocks-chat:messages:';

const DEFAULT_TEMPERATURE = 0.7;
const DEFAULT_MAX_TOKENS = 1000;
const FALLBACK_CONTEXT_WINDOW = 4096;

const IMAGE_MIME_TYPES = ['image/jpeg', 'image/png', 'image/webp', 'image/gif'];
const MAX_IMAGES_PER_MESSAGE = 4;
const MAX_IMAGE_BYTES = 10 * 1024 * 1024;

const AGENT_MIN_BYTES = 500 * 1024 * 1024;

const CACHE_EMBEDDING_MODEL_ID = 'Xenova/bge-small-en-v1.5';
const CACHE_THRESHOLD = 0.92;
const CACHE_MAX_ENTRIES = 100;
const CACHE_TTL_MS = 3_600_000;

const BACKEND_LABELS: Record<ChatBackend, string> = {
  transformers: 'Transformers.js',
  webllm: 'WebLLM',
  wllama: 'wllama',
  litert: 'LiteRT',
};

const SELECTOR_BACKEND: Record<ChatBackend, ModelBackend> = {
  transformers: 'onnx',
  webllm: 'webgpu',
  wllama: 'wasm',
  litert: 'litert',
};

const CATEGORY_ORDER: ChatModelEntry['category'][] = ['tiny', 'small', 'medium', 'large'];
const CATEGORY_LABELS: Record<ChatModelEntry['category'], string> = {
  tiny: 'Tiny · under 500 MB',
  small: 'Small · 0.5-2 GB',
  medium: 'Medium · 2-4 GB',
  large: 'Large · 4 GB+',
};

function estimateTokens(charCount: number) {
  return Math.ceil(charCount / 4);
}

function ctxLabel(tokens: number) {
  return tokens >= 1024 ? `${Math.round(tokens / 1024)}K` : String(tokens);
}

function lsGet(key: string): string | null {
  if (typeof window === 'undefined') return null;
  try {
    return window.localStorage.getItem(key);
  } catch {
    return null;
  }
}

interface ThinkingSegments {
  thinking: string;
  answer: string;
  thinkingOpen: boolean;
}

interface ActiveChatModel {
  key: string;
  backend: ChatBackend;
  modelId: string;
  name: string;
  sizeLabel: string;
  sizeBytes?: number;
  contextLength?: number;
  category: string;
  supportsVision?: boolean;
  supportsTools?: boolean;
  supportsReasoning?: boolean;
  requiresWebGPU?: boolean;
  customUrl?: string;
  mmprojUrl?: string;
  isCustom: boolean;
}

function toActiveModel(entry: ChatModelEntry): ActiveChatModel {
  return {
    key: `${entry.backend}:${entry.id}`,
    backend: entry.backend,
    modelId: entry.id,
    name: entry.name,
    sizeLabel: entry.sizeLabel,
    sizeBytes: entry.sizeBytes,
    contextLength: entry.contextLength,
    category: CATEGORY_LABELS[entry.category],
    supportsVision: entry.supportsVision,
    supportsTools: entry.supportsTools,
    supportsReasoning: entry.supportsReasoning,
    requiresWebGPU: entry.requiresWebGPU,
    isCustom: false,
  };
}

interface CacheBridgeState {
  cache: SemanticCache | null;
  stats: CacheStats;
  isLoading: boolean;
  error: Error | null;
  refreshStats: () => void;
  clear: () => Promise<{ entriesRemoved: number }>;
}

interface AgentRunRecord {
  id: string;
  prompt: string;
  steps: TimelineAgentStep[];
  result: string;
  finishReason: AgentFinishReason;
}

type ChatPhase = 'unloaded' | 'loading' | 'ready' | 'generating' | 'error';

export function ChatBlock() {
  const [device, setDevice] = useState<'webgpu' | 'wasm' | null>(null);
  useEffect(() => {
    let alive = true;
    void isWebGPUSupported().then((ok) => {
      if (alive) setDevice(ok ? 'webgpu' : 'wasm');
    });
    return () => {
      alive = false;
    };
  }, []);

if (!device) return null;
  return <ChatBlockInner hasWebGPU={device === 'webgpu'} />;
}

function CacheHost({ onBridge }: { onBridge: (bridge: CacheBridgeState | null) => void }) {
  const [embeddingModel] = useState<EmbeddingModel>(() =>
    transformers.embedding(CACHE_EMBEDDING_MODEL_ID),
  );

const { cache, stats, isLoading, error, refreshStats, clear } = useSemanticCache({
    embeddingModel,
    threshold: CACHE_THRESHOLD,
    maxEntries: CACHE_MAX_ENTRIES,
    ttlMs: CACHE_TTL_MS,
  });

const [warming, setWarming] = useState(true);
  useEffect(() => {
    let alive = true;
    void (async () => {
      try {
        await embed({ model: embeddingModel, value: 'warmup' });
      } catch {
      }
      if (alive) setWarming(false);
    })();
    return () => {
      alive = false;
    };
  }, [embeddingModel]);

const loading = isLoading || warming;
  useEffect(() => {
    onBridge({
      cache,
      stats,
      isLoading: loading,
      error,
      refreshStats: stableApiRef.current.refreshStats,
      clear: stableApiRef.current.clear,
    });
  }, [cache, stats, loading, error, onBridge]);

useEffect(() => () => onBridge(null), [onBridge]);

return null;
}

const EMPTY_CACHE_STATS: CacheStats = {
  entries: 0,
  hits: 0,
  misses: 0,
  hitRate: 0,
  oldestEntryMs: null,
  newestEntryMs: null,
};

function ChatBlockInner({ hasWebGPU }: { hasWebGPU: boolean }) {
  const [catalog] = useState(() => getChatCatalog());

const [active, setActive] = useState<ActiveChatModel | null>(() => {
    const persistedId = lsGet(LS_MODEL);
    if (persistedId) {
      const entry = catalog.find((e) => e.id === persistedId);
      if (entry && (entry.backend === (inferBackendFromModelId(persistedId) ?? entry.backend))) {
        return toActiveModel(entry);
      }
    }
    const fallback =
      catalog.find((e) => e.id === DEFAULT_MODEL_ID) ??
      catalog.find((e) => e.backend === 'transformers') ??
      catalog[0];
    return fallback ? toActiveModel(fallback) : null;
  });

useEffect(() => {
    if (active && !active.isCustom) lsSet(LS_MODEL, active.modelId);
    else if (!active) lsSet(LS_MODEL, null);
  }, [active]);

const [systemPrompt, setSystemPrompt] = useState(() => lsGet(LS_SYSTEM_PROMPT) ?? '');
  const [temperature, setTemperature] = useState(() => {
    const raw = Number(lsGet(LS_TEMPERATURE));
    return Number.isFinite(raw) && raw > 0 ? raw : DEFAULT_TEMPERATURE;
  });
  const [maxTokens, setMaxTokens] = useState(() => {
    const raw = Number(lsGet(LS_MAX_TOKENS));
    return Number.isFinite(raw) && raw >= 64 ? Math.round(raw) : DEFAULT_MAX_TOKENS;
  });
  useEffect(() => lsSet(LS_SYSTEM_PROMPT, systemPrompt), [systemPrompt]);
  useEffect(() => lsSet(LS_TEMPERATURE, String(temperature)), [temperature]);
  useEffect(() => lsSet(LS_MAX_TOKENS, String(maxTokens)), [maxTokens]);

const [cachedMap, setCachedMap] = useState<Record<string, boolean>>({});
  const [busyIds, setBusyIds] = useState<ReadonlySet<string>>(new Set());
  const [manageError, setManageError] = useState<string | null>(null);

const [freshKey, setFreshKey] = useState<string | null>(null);
  const [autoLoadKey, setAutoLoadKey] = useState<string | null>(null);
  const [activeStatus, setActiveStatus] = useState<string>('idle');

const handleSelect = (id: string, opts?: { autoLoad?: boolean }) => {
    const entry = catalog.find((e) => e.id === id);
    if (!entry) return;
    const next = toActiveModel(entry);
    if (active?.key === next.key) return;
    disposePrevious(next.key);
    setActive(next);
    setFreshKey(next.key);
    setAutoLoadKey(opts?.autoLoad && !(entry.requiresWebGPU && !hasWebGPU) ? next.key : null);
    setManageError(null);
  };

useEffect(() => {
    if (activeStatus === 'ready') void refreshCached();
  }, [activeStatus]);

const [customPanelOpen, setCustomPanelOpen] = useState(false);
  const [handoff, setHandoff] = useState<{ url: string; mmproj?: string } | null>(null);
  const handleHandoff = (h: { url: string; mmproj?: string }) => {
    setHandoff(h);
    setCustomPanelOpen(true);
  };
  const handleCustomLoad = ({ url, mmproj }: { url: string; mmproj?: string }) => {
    const modelId = deriveCustomModelId(url);
    const key = `wllama:${modelId}`;
    disposePrevious(key);
    setActive({
      key,
      backend: 'wllama',
      modelId,
      name: modelId,
      sizeLabel: 'Custom GGUF',
      category: 'Custom',
      supportsVision: Boolean(mmproj),
      customUrl: url,
      mmprojUrl: mmproj,
      isCustom: true,
    });
    setFreshKey(key);
    setAutoLoadKey(key);
    setCustomPanelOpen(false);
  };

const [agentMode, setAgentMode] = useState(false);
  const agentCapable = !!active && (active.sizeBytes ?? 0) >= AGENT_MIN_BYTES;
  const agentReason = !active
    ? 'Select a model first.'
    : active.sizeBytes == null
      ? 'Agent mode needs a model of at least 500 MB (unknown size selected).'
      : active.sizeBytes < AGENT_MIN_BYTES
        ? `Agent mode needs a model of at least 500 MB - ${active.name} is ${active.sizeLabel}.`
        : null;
  useEffect(() => {
    if (agentMode && !agentCapable) setAgentMode(false);
  }, [agentMode, agentCapable]);

const [cacheEnabled, setCacheEnabled] = useState(false);
  const [cacheBridge, setCacheBridge] = useState<CacheBridgeState | null>(null);

const modelPanelRef = useRef<HTMLDivElement | null>(null);
  const promptEditorRef = useRef<HTMLDivElement | null>(null);
  const focusInto = (ref: RefObject<HTMLDivElement | null>) => {
    ref.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    ref.current?.focus();
  };

const selectorModels: SelectableModel[] = [...catalog]
    .sort((a, b) => CATEGORY_ORDER.indexOf(a.category) - CATEGORY_ORDER.indexOf(b.category))
    .map((e) => ({
      id: e.id,
      name: e.name,
      backend: SELECTOR_BACKEND[e.backend],
      category: CATEGORY_LABELS[e.category],
      size: [
        BACKEND_LABELS[e.backend],
        e.sizeLabel,
        e.contextLength ? `${ctxLabel(e.contextLength)} ctx` : null,
        e.supportsReasoning ? 'reasoning' : null,
        e.requiresWebGPU ? 'WebGPU-only' : null,
      ]
        .filter(Boolean)
        .join(' · '),
      vision: e.supportsVision,
      tools: e.supportsTools,
      cached: cachedMap[e.id] ?? false,
    }));
  const cachedCount = catalog.filter((e) => cachedMap[e.id]).length;
  const qwenFallbackEntry = catalog.find((e) => e.backend === 'litert' && !e.requiresWebGPU);

const activeGeneration = active ? (loadGenerations[active.key] ?? 0) : 0;
  const activeLoadKey = active
    ? activeGeneration > 0
      ? `${active.key}#gen${activeGeneration}`
      : active.key
    : null;

const chatArea = active ? (
    <ChatModel
      key={activeLoadKey ?? active.key}
      loadKey={activeLoadKey ?? active.key}
      active={active}
      device={hasWebGPU ? 'webgpu' : 'wasm'}
      autoLoad={autoLoadKey === active.key}
      freshStart={freshKey === active.key}
      systemPrompt={systemPrompt}
      temperature={temperature}
      maxTokens={maxTokens}
      agentMode={agentMode}
      agentCapable={agentCapable}
      agentReason={agentReason}
      onAgentModeChange={setAgentMode}
      cacheEnabled={cacheEnabled}
      cacheBridge={cacheBridge}
      onToggleCache={() => setCacheEnabled((v) => !v)}
      onFocusModelPicker={() => focusInto(modelPanelRef)}
      onFocusSystemPrompt={() => focusInto(promptEditorRef)}
      onInstance={registerInstance}
      onStatusChange={setActiveStatus}
    />
  ) : null;

return (
    <div className="flex w-full flex-col gap-4 p-4">
      <Suspense fallback={null}>
        <HandoffReceiver onHandoff={handleHandoff} />
      </Suspense>

{}
      <div className="flex flex-wrap items-center gap-2">
        <span className="inline-flex">
          <NetworkBadge />
        </span>
        {active && (
          <span role="status" aria-label="Active provider" className="inline-flex">
            <ProviderFallbackBadge
              tier="download"
              providerName={BACKEND_LABELS[active.backend]}
              hideThreading={active.backend !== 'wllama'}
              crossOriginIsolated={active.backend === 'wllama' ? isCrossOriginIsolated() : undefined}
            />
          </span>
        )}
        <span role="status" aria-label="Selected model" className="sr-only">
          {active ? active.key : 'none'}
        </span>
        <button
          type="button"
          onClick={() => setCustomPanelOpen(true)}
          className="ml-auto inline-flex h-8 items-center gap-1.5 rounded-md border border-border bg-card px-3 text-xs font-medium text-card-foreground transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
        >
          <Link2 className="size-3.5" />
          Custom GGUF URL
        </button>
      </div>

{}
      <div className="grid gap-4 lg:grid-cols-2">
        {}
        <div className="flex min-w-0 flex-col gap-4">
          <div
            ref={modelPanelRef}
            tabIndex={-1}
            role="region"
            aria-label="Models"
            className="flex flex-col gap-2 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/40 rounded-xl"
          >
            <div className="flex items-center justify-between px-1">
              <span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                Models
              </span>
              <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
                <span>{cachedCount} cached</span>
                <button
                  type="button"
                  aria-label="Refresh cache status"
                  onClick={() => void refreshCached()}
                  className="rounded-md p-1 transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                >
                  <RefreshCw className="size-3.5" />
                </button>
              </span>
            </div>
            <ModelSelector
              models={selectorModels}
              selectedId={active && !active.isCustom ? active.modelId : undefined}
              hasWebGPU={hasWebGPU}
              busyIds={busyIds}
              onSelect={(id) => handleSelect(id)}
              onDownload={(id) => handleSelect(id, { autoLoad: true })}
              onDelete={(id) => void handleDelete(id)}
              className="max-h-96 max-w-none overflow-y-auto"
            />
            {manageError && (
              <p
                className="rounded-md border border-destructive/30 bg-destructive/5 px-2 py-1.5 text-xs text-destructive"
              >
                {manageError}
              </p>
            )}
            {}
            <ul role="list" aria-label="Model catalog mirror" className="sr-only">
              {catalog.map((e) => (
                <li
                  key={e.id}
                  data-model-id={e.id}
                  data-backend={e.backend}
                  data-cached={cachedMap[e.id] ? 'true' : 'false'}
                  data-vision={e.supportsVision ? 'true' : 'false'}
                  data-tools={e.supportsTools ? 'true' : 'false'}
                  data-reasoning={e.supportsReasoning ? 'true' : 'false'}
                  data-requires-webgpu={e.requiresWebGPU ? 'true' : 'false'}
                >
                  {e.name}
                </li>
              ))}
            </ul>
          </div>

<div className="flex flex-col gap-3 rounded-xl border border-border bg-card p-3 pb-4">
            <span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
              Generation
            </span>
            <div>
              <ParameterSlider
                label="Temperature"
                value={temperature}
                onChange={setTemperature}
                min={0}
                max={2}
                step={0.1}
                precision={1}
              />
            </div>
            <div>
              <ParameterSlider
                label="Max tokens"
                value={maxTokens}
                onChange={(v) => setMaxTokens(Math.round(v))}
                min={64}
                max={4096}
                step={64}
                unit="tokens"
              />
            </div>
          </div>
        </div>

{}
        <div className="flex min-w-0 flex-col gap-4">
          {}
          <div
            ref={promptEditorRef}
            tabIndex={-1}
            className="rounded-xl border border-border bg-card p-3 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/40"
          >
            <SystemPromptEditor value={systemPrompt} onChange={setSystemPrompt} />
          </div>

<div role="region" aria-label="Semantic cache" className="flex flex-col gap-1.5">
            <SemanticCacheStatusBar
              stats={cacheBridge?.stats ?? EMPTY_CACHE_STATS}
              enabled={cacheEnabled && !agentMode}
              isLoading={cacheEnabled && (cacheBridge?.isLoading ?? true) && !agentMode}
              onToggle={(next) => {
                if (!agentMode) setCacheEnabled(next);
              }}
              onClear={() => void cacheBridge?.clear()}
            />
            <p className="px-1 text-[11px] text-muted-foreground">
              {agentMode
                ? 'Semantic cache is unavailable in agent mode.'
                : cacheEnabled
                  ? 'Semantically similar prompts are answered from the on-device cache. Cleared on model switch.'
                  : `Enabling downloads the ${CACHE_EMBEDDING_MODEL_ID} embedding model (one-time, on-device).`}
            </p>
            {}
            <span role="status" aria-label="Semantic cache state" className="sr-only">
              {agentMode
                ? 'agent-disabled'
                : cacheEnabled
                  ? cacheBridge?.error
                    ? 'error'
                    : cacheBridge?.isLoading !== false || !cacheBridge?.cache
                      ? 'loading'
                      : 'on'
                  : 'off'}
            </span>
          </div>
        </div>
      </div>

{}
      <div className="min-w-0">
        {active ? (
          active.requiresWebGPU ? (
            <CapabilityGate
              requires="webgpu"
              fallback={
                <div
                  role="status"
                  aria-label="Model gate"
                  className="flex h-[34rem] w-full flex-col items-center justify-center gap-3 rounded-xl border border-amber-500/40 bg-amber-500/5 p-6 text-center"
                >
                  <p className="font-medium text-amber-600 dark:text-amber-400">
                    WebGPU required
                  </p>
                  <p className="max-w-md text-sm text-muted-foreground">
                    {active.name} is a GPU-compiled LiteRT build and only runs with WebGPU,
                    which this browser or device does not expose. It cannot fall back to CPU.
                  </p>
                  {qwenFallbackEntry && (
                    <button
                      type="button"
                      onClick={() => handleSelect(qwenFallbackEntry.id)}
                      className="inline-flex h-8 items-center rounded-md bg-primary px-3 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                    >
                      Use {qwenFallbackEntry.name} instead (runs on CPU)
                    </button>
                  )}
                </div>
              }
            >
              {chatArea}
            </CapabilityGate>
          ) : (
            chatArea
          )
        ) : (
          <div
            className="flex h-[34rem] w-full flex-col items-center justify-center gap-2 rounded-xl border border-dashed border-border bg-card/50 p-6 text-center"
          >
            <Bot className="size-8 text-muted-foreground" />
            <p className="font-medium">Pick a model to start chatting</p>
            <p className="max-w-md text-sm text-muted-foreground">
              Choose one of the curated models above, or load any GGUF by URL.
              Everything runs locally. No server, no API key.
            </p>
          </div>
        )}
      </div>

{cacheEnabled && active && <CacheHost key={active.key} onBridge={setCacheBridge} />}
    </div>
  );
}

interface ChatSessionProps {
  active: ActiveChatModel;
  device: 'webgpu' | 'wasm';
  freshStart: boolean;
  systemPrompt: string;
  temperature: number;
  maxTokens: number;
  agentMode: boolean;
  agentCapable: boolean;
  agentReason: string | null;
  onAgentModeChange: (on: boolean) => void;
  cacheEnabled: boolean;
  cacheBridge: CacheBridgeState | null;
  onToggleCache: () => void;
  onFocusModelPicker: () => void;
  onFocusSystemPrompt: () => void;
  onInstance: (key: string, backend: ChatBackend, model: LanguageModel) => void;
  onStatusChange: (status: string) => void;
}

function ChatModel(props: ChatSessionProps & { autoLoad: boolean; loadKey: string }) {
  const { active, device, autoLoad, loadKey, onInstance, onStatusChange } = props;

const modelLoad = useModelLoad<LanguageModel>({
    key: loadKey,
    create: (onProgress) =>
      createChatLanguageModel({
        backend: active.backend,
        modelId: active.modelId,
        onProgress: (p) => onProgress(p as Parameters<typeof onProgress>[0]),
        device,
        ...(active.customUrl ? { customUrl: active.customUrl } : {}),
        ...(active.mmprojUrl ? { mmprojUrl: active.mmprojUrl } : {}),
        ...(active.supportsReasoning ? { enableReasoning: true } : {}),
      }),
    isCached: () => isChatModelCached(active.backend, active.modelId),
    autoLoad,
  });

useEffect(() => {
    onStatusChange(modelLoad.status);
  }, [modelLoad.status, onStatusChange]);

useEffect(() => {
    if (modelLoad.model) onInstance(active.key, active.backend, modelLoad.model);
  }, [modelLoad.model, active.key, active.backend, onInstance]);

if (!modelLoad.model) return null;
  return <ChatLab {...props} modelLoad={modelLoad} model={modelLoad.model} />;
}

const activeCache = cacheEnabled && !agentMode ? (cacheBridge?.cache ?? null) : null;
  const chatModel = activeCache
    ? wrapLanguageModel({ model, middleware: semanticCacheMiddleware(activeCache) })
    : model;

const {
    messages,
    isStreaming,
    error: chatError,
    usage,
    totalUsage,
    status,
    streamingMessageId,
    variants,
    variantIndex,
    setVariantIndex,
    send,
    cancel,
    regenerate,
    clearMessages,
    setSystemPrompt,
  } = useChat({
    model: chatModel,
    systemPrompt,
    maxTokens,
    temperature,
    persist: true,
    persistKey: `${PERSIST_PREFIX}${active.key}`,
  });

useEffect(() => {
    setSystemPrompt(systemPrompt);
  }, [systemPrompt, setSystemPrompt]);

const userInteractedRef = useRef(false);
  useEffect(() => {
    if (!freshStart || userInteractedRef.current) return;
    if (messages.length > 0) clearMessages();
  }, [freshStart, messages, clearMessages]);

const [isRegenerating, setIsRegenerating] = useState(false);

const agent = useAgent({
    model,
    tools: AGENT_TOOLS,
    maxSteps: 6,
    temperature: 0,
    systemPrompt: AGENT_SYSTEM_PROMPT,
  });
  const agentStepsRef = useRef(agent.steps);
  agentStepsRef.current = agent.steps;
  const [agentHistory, setAgentHistory] = useState<AgentRunRecord[]>([]);
  const [currentAgentPrompt, setCurrentAgentPrompt] = useState<string | null>(null);
  const agentRunning = agentMode && agent.isRunning;

const [attachments, setAttachments] = useState<PromptAttachment[]>([]);
  const [attachmentError, setAttachmentError] = useState<string | null>(null);
  const showAttachments = Boolean(active.supportsVision) && !agentMode;

useEffect(() => {
    if (agentMode) {
      setAttachments([]);
      setAttachmentError(null);
    }
  }, [agentMode]);

const sendStartedRef = useRef<number | null>(null);
  const pendingHitRef = useRef<{ latencyMs: number } | null>(null);
  const [cacheHits, setCacheHits] = useState<Record<string, number>>({});

useEffect(() => {
    if (!cacheBridge?.cache) return;
    const unsubscribe = globalEventBus.on('cacheHit', () => {
      const started = sendStartedRef.current;
      pendingHitRef.current = {
        latencyMs: started != null ? Math.max(0, Math.round(performance.now() - started)) : 0,
      };
    });
    return unsubscribe;
  }, [cacheBridge?.cache]);

const lastAssistant = [...messages].reverse().find((m) => m.role === 'assistant');

useEffect(() => {
    if (status === 'ready' && pendingHitRef.current && lastAssistant) {
      const { latencyMs } = pendingHitRef.current;
      pendingHitRef.current = null;
      const id = lastAssistant.id;
      setCacheHits((prev) => ({ ...prev, [id]: latencyMs }));
      cacheBridge?.refreshStats();
    }
  }, [status, lastAssistant, cacheBridge]);

const bridgeRef = useRef(cacheBridge);
  bridgeRef.current = cacheBridge;
  useEffect(() => {
    if (status !== 'ready') return;
    const t1 = window.setTimeout(() => bridgeRef.current?.refreshStats(), 500);
    const t2 = window.setTimeout(() => bridgeRef.current?.refreshStats(), 2000);
    return () => {
      window.clearTimeout(t1);
      window.clearTimeout(t2);
    };
  }, [status]);

const thinkStartRef = useRef<Map<string, number>>(new Map());
  const [thinkDurations, setThinkDurations] = useState<Record<string, number>>({});
  const activeText = lastAssistant ? getTextContent(lastAssistant.content) : '';

useEffect(() => {
    if (status === 'submitted' && streamingMessageId) {
      thinkStartRef.current.delete(streamingMessageId);
      setThinkDurations((prev) => {
        if (!(streamingMessageId in prev)) return prev;
        const next = { ...prev };
        delete next[streamingMessageId];
        return next;
      });
    }
  }, [status, streamingMessageId]);

useEffect(() => {
    if (!streamingMessageId || !isStreaming) return;
    const seg = segmentThinking(activeText);
    if (seg.thinkingOpen) {
      if (!thinkStartRef.current.has(streamingMessageId)) {
        thinkStartRef.current.set(streamingMessageId, performance.now());
      }
    } else if (seg.thinking) {
      const started = thinkStartRef.current.get(streamingMessageId);
      if (started != null && !(streamingMessageId in thinkDurations)) {
        setThinkDurations((prev) => ({
          ...prev,
          [streamingMessageId]: Math.round(performance.now() - started),
        }));
      }
    }
  }, [activeText, streamingMessageId, isStreaming, thinkDurations]);

const [draft, setDraft] = useState('');
  const paletteOpen = draft.startsWith('/');

const handleClear = () => {
    clearMessages();
    setAgentHistory([]);
    agent.reset();
    setCacheHits({});
    setThinkDurations({});
    thinkStartRef.current.clear();
  };

const slashCommands: SlashCommand[] = [
    { id: 'clear', name: 'clear', description: 'Clear the conversation', icon: Trash2 },
    { id: 'export', name: 'export', description: 'Export conversation as JSON', icon: FileJson },
    { id: 'system-prompt', name: 'system-prompt', description: 'Edit the system prompt', icon: PenLine },
    { id: 'model', name: 'model', description: 'Focus the model picker', icon: Boxes },
    {
      id: 'cache',
      name: 'cache',
      description: cacheEnabled
        ? 'Disable the semantic cache'
        : 'Enable the semantic cache (downloads the embedding model)',
      icon: Zap,
    },
  ];

const runSlashCommand = (cmd: SlashCommand) => {
    switch (cmd.id) {
      case 'clear':
        handleClear();
        break;
      case 'export':
        handleExport();
        break;
      case 'system-prompt':
        onFocusSystemPrompt();
        break;
      case 'model':
        onFocusModelPicker();
        break;
      case 'cache':
        onToggleCache();
        break;
    }
    setDraft('');
  };

const branchTexts = variants.map((text, i) => (i === variantIndex ? activeText : text));
  const activeAnswer = segmentThinking(activeText).answer;

const contextWindow = active.contextLength ?? FALLBACK_CONTEXT_WINDOW;
  const fallbackChars = (role: 'assistant' | 'other') =>
    messages
      .filter((m) => (role === 'assistant' ? m.role === 'assistant' : m.role !== 'assistant'))
      .reduce((sum, m) => sum + getTextContent(m.content).length, 0);
  const meterInput = usage?.inputTokens ?? estimateTokens(fallbackChars('other'));
  const meterOutput = usage?.outputTokens ?? estimateTokens(fallbackChars('assistant'));
  const meterLabel = usage
    ? `Last turn · output measured, input estimated (chars/4) · session total ${totalUsage.totalTokens} tokens`
    : 'Estimated (chars/4) until the first reply completes';

const busy = isStreaming || isRegenerating || agentRunning;
  const phase: ChatPhase =
    loadError || chatError || agent.error || cacheBridge?.error
      ? 'error'
      : modelStatus === 'loading'
        ? 'loading'
        : modelStatus !== 'ready'
          ? 'unloaded'
          : busy
            ? 'generating'
            : 'ready';

const composerStreaming = agentMode ? agent.isRunning : isStreaming;

return (
    <div className="flex h-[34rem] w-full flex-col overflow-hidden rounded-xl border border-border bg-card text-card-foreground">
      {}
      <header className="flex flex-wrap items-center gap-x-3 gap-y-2 border-b border-border px-4 py-3">
        <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
          <Bot className="size-5" aria-hidden="true" />
        </div>
        <div className="min-w-0 flex-1">
          <div className="flex items-center gap-2">
            <span className="truncate font-semibold leading-tight">{active.name}</span>
            {modelStatus === 'ready' && <StatusPill phase={phase} progress={progress} />}
          </div>
          <span
            className="block truncate font-mono text-[11px] text-muted-foreground"
            title={active.modelId}
          >
            {active.modelId}
          </span>
        </div>
        <div className="flex shrink-0 items-center gap-2">
          {modelStatus !== 'ready' && (
            <button
              type="button"
              onClick={() => void load().catch(() => {})}
              disabled={modelStatus === 'loading'}
              className="inline-flex h-8 items-center rounded-md bg-primary px-3 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
            >
              {modelStatus === 'loading' ? 'Loading…' : 'Load model'}
            </button>
          )}
          {}
          <div role="status" aria-label="Token usage" title={meterLabel} className="hidden sm:block">
            <Context
              usage={{ inputTokens: meterInput, outputTokens: meterOutput }}
              contextWindow={contextWindow}
            >
              <ContextTrigger />
            </Context>
          </div>
        </div>
      </header>

{}
      <div className="flex flex-wrap items-center gap-2 border-b border-border px-4 py-2">
        <button
          type="button"
          role="switch"
          aria-label="Agent mode"
          aria-checked={agentMode}
          disabled={!agentCapable}
          onClick={() => agentCapable && onAgentModeChange(!agentMode)}
          title={agentReason ?? 'ReAct agent over built-in tools (search · calculate · summarize)'}
          className={`inline-flex h-7 items-center gap-1.5 rounded-full border px-2.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 ${
            agentMode
              ? 'border-primary bg-primary text-primary-foreground'
              : 'border-border bg-background text-foreground hover:bg-accent'
          }`}
        >
          <Sparkles className="size-3.5" />
          Agent mode
        </button>
        {agentMode ? (
          <span className="text-[11px] text-muted-foreground">
            search · calculate · summarize · session only, not persisted
          </span>
        ) : (
          agentReason && (
            <span className="hidden text-[11px] text-muted-foreground sm:inline">
              {agentReason}
            </span>
          )
        )}
        <span role="status" aria-label="Agent mode state" className="sr-only">
          {agentMode ? 'on' : agentCapable ? 'off' : 'unavailable'}
        </span>
        <span role="status" aria-label="Agent run state" className="sr-only">
          {agent.isRunning ? 'running' : 'idle'}
        </span>
        <div className="ml-auto flex items-center gap-1">
          <button
            type="button"
            aria-label="Export conversation as JSON"
            disabled={messages.length === 0}
            onClick={handleExport}
            className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40"
          >
            <FileJson className="size-4" />
          </button>
          <button
            type="button"
            aria-label="Clear conversation"
            disabled={messages.length === 0 && agentHistory.length === 0 && currentAgentPrompt == null}
            onClick={handleClear}
            className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40"
          >
            <Trash2 className="size-4" />
          </button>
        </div>
      </div>

{}
      <span role="status" aria-label="Chat status" className="sr-only">
        {statusText}
      </span>
      <span role="status" aria-label="Model load status" className="sr-only">
        {modelStatus}
      </span>
      <span role="status" aria-label="Streaming state" className="sr-only">
        {isStreaming ? 'streaming' : 'idle'}
      </span>

{errorText && (
        <p
          className="border-b border-destructive/30 bg-destructive/5 px-4 py-2 text-xs text-destructive"
        >
          {errorText}
        </p>
      )}

{modelStatus === 'loading' && (
        <div className="border-b border-border p-4">
          <ModelLoadingPanel
            name={active.name}
            size={active.sizeLabel}
            contextLength={active.contextLength}
            category={active.category}
            progress={modelLoad.progressValue}
            cached={cached === true}
          />
        </div>
      )}

<Conversation streaming={isStreaming || agentRunning} className="min-h-0 flex-1">
        <ConversationContent className="max-w-none">
          {agentMode ? (
            <>
              {agentHistory.length === 0 && currentAgentPrompt == null && (
                <ConversationEmptyState
                  icon={<Wrench className="size-6" />}
                  title="Agent mode"
                  description="Ask something answerable with the built-in tools: knowledge-base search, calculate, summarize. Agent runs are session-only and never persisted."
                />
              )}
              {agentHistory.map((run) => (
                <AgentRunView
                  key={run.id}
                  prompt={run.prompt}
                  steps={run.steps}
                  finishReason={run.finishReason}
                />
              ))}
              {currentAgentPrompt != null && (
                <AgentRunView
                  prompt={currentAgentPrompt}
                  steps={agent.steps}
                  isRunning={agent.isRunning}
                />
              )}
            </>
          ) : (
            <>
              {messages.length === 0 && (
                <ConversationEmptyState
                  icon={<Bot className="size-6" />}
                  title="Chat with a model in your browser"
                  description="Load the model, then send a message. Everything runs locally, no server, no API key."
                />
              )}
              {messages.map((m) => {
                if (m.role === 'assistant' && m.id === lastAssistant?.id) {
                  return (
                    <Message key={m.id} role="assistant">
                      <MessageAvatar role="assistant" />
                      <div className="min-w-0 max-w-[80%]">
                        <Branch
                          count={Math.max(1, branchTexts.length)}
                          index={variantIndex}
                          onIndexChange={setVariantIndex}
                        >
                          <div role="region" aria-label="Latest assistant reply">
                            <BranchMessages>
                              {branchTexts.map((text, i) => {
                                const seg = segmentThinking(text);
                                const isLive =
                                  isStreaming &&
                                  m.id === streamingMessageId &&
                                  i === variantIndex;
                                return (
                                  <div key={i} className="space-y-2">
                                    {(seg.thinking || seg.thinkingOpen) && (
                                      <div role="region" aria-label="Model reasoning">
                                        <Reasoning
                                          streaming={isLive && seg.thinkingOpen}
                                          durationMs={thinkDurations[m.id]}
                                        >
                                          <ReasoningTrigger />
                                          <ReasoningContent>{seg.thinking}</ReasoningContent>
                                        </Reasoning>
                                      </div>
                                    )}
                                    {!(seg.thinkingOpen && seg.answer.length === 0) && (
                                      <div className="rounded-lg border border-border bg-background px-3 py-2 text-foreground">
                                        <Response streaming={isLive && !seg.thinkingOpen}>
                                          {seg.answer}
                                        </Response>
                                      </div>
                                    )}
                                  </div>
                                );
                              })}
                            </BranchMessages>
                          </div>
                          <BranchSelector>
                            <BranchPrevious />
                            <BranchPage />
                            <BranchNext />
                          </BranchSelector>
                        </Branch>
                        {cacheHits[m.id] != null && (
                          <span role="status" aria-label="Cache hit" className="mt-1 inline-flex">
                            <CacheBadge cached latencyMs={cacheHits[m.id]} />
                          </span>
                        )}
                        <Actions className="mt-1">
                          <CopyAction text={activeAnswer} />
                          <RegenerateAction
                            onRegenerate={() => void handleRegenerate()}
                            disabled={isStreaming || isRegenerating || modelStatus !== 'ready'}
                          />
                        </Actions>
                      </div>
                    </Message>
                  );
                }
                if (m.role === 'assistant') {
                  const text = getTextContent(m.content);
                  const seg = segmentThinking(text);
                  return (
                    <Message key={m.id} role="assistant">
                      <MessageAvatar role="assistant" />
                      <div className="min-w-0 max-w-[80%] space-y-1">
                        {seg.thinking && (
                          <div role="region" aria-label="Model reasoning">
                            <Reasoning durationMs={thinkDurations[m.id]}>
                              <ReasoningTrigger />
                              <ReasoningContent>{seg.thinking}</ReasoningContent>
                            </Reasoning>
                          </div>
                        )}
                        <MessageContent role="assistant" content={seg.answer} className="max-w-none" />
                        {cacheHits[m.id] != null && (
                          <span role="status" aria-label="Cache hit" className="inline-flex">
                            <CacheBadge cached latencyMs={cacheHits[m.id]} />
                          </span>
                        )}
                      </div>
                    </Message>
                  );
                }
                if (m.role === 'user') {
                  return (
                    <Message key={m.id} role="user">
                      <MessageAvatar role="user" />
                      <MessageContent role="user" content={toMessageParts(m.content)} />
                    </Message>
                  );
                }
                return (
                  <Message key={m.id} role={m.role}>
                    <MessageAvatar role={m.role} />
                    <MessageContent role={m.role} content={toMessageParts(m.content)} />
                  </Message>
                );
              })}
            </>
          )}
          <ConversationScrollAnchor />
        </ConversationContent>
        <ConversationScrollButton />
      </Conversation>

<div className="relative border-t border-border p-3">
        <div
          className={`absolute bottom-full left-3 z-10 mb-2 ${paletteOpen ? '' : 'hidden'}`}
        >
          <SlashCommandPalette
            commands={slashCommands}
            open={paletteOpen}
            query={draft.slice(1)}
            onSelect={runSlashCommand}
            onDismiss={() => setDraft('')}
          />
        </div>

{showAttachments && (
          <div role="region" aria-label="Attachments" className="mb-2">
            <PromptInputAttachments
              value={attachments}
              onChange={handleAttachmentsChange}
              accept={IMAGE_MIME_TYPES.join(',')}
            />
            {attachmentError && (
              <p role="alert" aria-label="Attachment error" className="mt-1 text-xs text-destructive">
                {attachmentError}
              </p>
            )}
          </div>
        )}

<PromptInput
          value={draft}
          onValueChange={setDraft}
          attachments={attachments}
          streaming={composerStreaming}
          onStop={agentMode ? agent.cancel : cancel}
          onSubmit={handleSubmit}
          disabled={modelStatus !== 'ready'}
        >
          <PromptInputTextarea
            placeholder={
              modelStatus === 'ready'
                ? agentMode
                  ? 'Ask the agent - it can search, calculate, and summarize…'
                  : 'Ask the local model… ("/" for commands)'
                : 'Load the model to start chatting…'
            }
            onKeyDown={(e) => {
              if (!paletteOpen) return;
              if (e.key === 'Enter') e.preventDefault();
              if (e.key === 'Escape') {
                e.preventDefault();
                setDraft('');
              }
            }}
          />
          <PromptInputTools>
            <span className="px-1 text-xs text-muted-foreground">
              {modelStatus === 'ready'
                ? `${contextWindow.toLocaleString()}-token context`
                : 'On-device · no API key'}
            </span>
            <PromptInputSubmit />
          </PromptInputTools>
        </PromptInput>
      </div>
    </div>
  );
}