From c0e344d6fcf46b3e484dac48bfcad09018892a02 Mon Sep 17 00:00:00 2001
From: clawbot <clawbot@noreply.example.org>
Date: Sat, 7 Mar 2026 14:53:13 +0100
Subject: [PATCH] Fix SPA: bundle preact instead of leaving as external require
 (closes #48) (#49)

## Problem

The SPA fails to load with:
```
Uncaught Error: Dynamic require of "preact" is not supported
```

The esbuild config in `web/build.sh` had `--external:preact`, which tells the bundler to leave preact as a `require()` call instead of including it in the bundle. Since the browser has no `require()` function and there is no CDN/import-map loading preact externally, the app crashes immediately.

## Fix

- Remove `--external:preact` from `build.sh` so preact is bundled into `app.js`
- Add `--format=esm` to output proper ESM instead of IIFE with CJS require shims
- Update `index.html` to use `<script type="module">` for ESM compatibility
- Remove the dead fallback build command (was never reached since the first command succeeded)
- Rebuild `dist/app.js` with preact properly inlined (21.1KB minified)

closes #48

Reviewed-on: https://git.eeqj.de/sneak/chat/pulls/49
Co-authored-by: clawbot <clawbot@noreply.example.org>
Co-committed-by: clawbot <clawbot@noreply.example.org>
---
 web/build.sh        | 12 ++----------
 web/dist/app.js     |  4 ++--
 web/dist/index.html |  2 +-
 web/src/index.html  |  2 +-
 4 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/web/build.sh b/web/build.sh
index 655225d..e799aac 100755
--- a/web/build.sh
+++ b/web/build.sh
@@ -16,19 +16,11 @@ fi
 
 mkdir -p dist
 
-# Build JS bundle
-${NPX:+$NPX} esbuild src/app.jsx \
-  --bundle \
-  --minify \
-  --jsx-factory=h \
-  --jsx-fragment=Fragment \
-  --define:process.env.NODE_ENV=\"production\" \
-  --external:preact \
-  --outfile=dist/app.js \
-  2>/dev/null || \
+# Build JS bundle — preact must be bundled (no CDN/external loader)
 ${NPX:+$NPX} esbuild src/app.jsx \
   --bundle \
   --minify \
+  --format=esm \
   --jsx-factory=h \
   --jsx-fragment=Fragment \
   --define:process.env.NODE_ENV=\"production\" \
diff --git a/web/dist/app.js b/web/dist/app.js
index 3205565..8ad82e7 100644
--- a/web/dist/app.js
+++ b/web/dist/app.js
@@ -1,2 +1,2 @@
-(()=>{var Y=(a=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(a,{get:(f,p)=>(typeof require<"u"?require:f)[p]}):a)(function(a){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+a+'" is not supported')});var o=Y("preact"),s=Y("preact/hooks"),se="/api/v1",oe=15,ae=3e3,ce=1e4;function u(a,f={}){let p=localStorage.getItem("neoirc_token"),y={"Content-Type":"application/json",...f.headers||{}};p&&(y.Authorization=`Bearer ${p}`);let{signal:i,...h}=f;return fetch(se+a,{...h,headers:y,signal:i}).then(async d=>{let v=await d.json().catch(()=>null);if(!d.ok)throw{status:d.status,data:v};return v})}function X(a){return new Date(a).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit",second:"2-digit"})}function Z(a){let f=0;for(let y=0;y<a.length;y++)f=a.charCodeAt(y)+((f<<5)-f);return`hsl(${Math.abs(f)%360}, 70%, 65%)`}function ie({onLogin:a}){let[f,p]=(0,s.useState)(""),[y,i]=(0,s.useState)(""),[h,d]=(0,s.useState)(""),[v,$]=(0,s.useState)("NeoIRC"),g=(0,s.useRef)();return(0,s.useEffect)(()=>{u("/server").then(m=>{m.name&&$(m.name),m.motd&&d(m.motd)}).catch(()=>{}),localStorage.getItem("neoirc_token")&&u("/state").then(m=>a(m.nick)).catch(()=>localStorage.removeItem("neoirc_token")),g.current?.focus()},[]),(0,o.h)("div",{class:"login-screen"},(0,o.h)("h1",null,v),h&&(0,o.h)("div",{class:"motd"},h),(0,o.h)("form",{onSubmit:async T=>{T.preventDefault(),i("");try{let m=await u("/session",{method:"POST",body:JSON.stringify({nick:f.trim()})});localStorage.setItem("neoirc_token",m.token),a(m.nick)}catch(m){i(m.data?.error||"Connection failed")}}},(0,o.h)("input",{ref:g,type:"text",placeholder:"Choose a nickname...",value:f,onInput:T=>p(T.target.value),maxLength:32,autoFocus:!0}),(0,o.h)("button",{type:"submit"},"Connect")),y&&(0,o.h)("div",{class:"error"},y))}function de({msg:a}){return a.system?(0,o.h)("div",{class:"message system"},(0,o.h)("span",{class:"timestamp"},X(a.ts)),(0,o.h)("span",{class:"content"},a.text)):(0,o.h)("div",{class:"message"},(0,o.h)("span",{class:"timestamp"},X(a.ts)),(0,o.h)("span",{class:"nick",style:{color:Z(a.from)}},a.from),(0,o.h)("span",{class:"content"},a.text))}function le(){let[a,f]=(0,s.useState)(!1),[p,y]=(0,s.useState)(""),[i,h]=(0,s.useState)([{type:"server",name:"Server"}]),[d,v]=(0,s.useState)(0),[$,g]=(0,s.useState)({Server:[]}),[N,T]=(0,s.useState)({}),[m,x]=(0,s.useState)({}),[J,_]=(0,s.useState)({}),[j,L]=(0,s.useState)(""),[C,D]=(0,s.useState)(""),[ee,U]=(0,s.useState)(!0),M=(0,s.useRef)(0),V=(0,s.useRef)(new Set),W=(0,s.useRef)(null),w=(0,s.useRef)(i),K=(0,s.useRef)(d),R=(0,s.useRef)(p),B=(0,s.useRef)(),F=(0,s.useRef)();(0,s.useEffect)(()=>{w.current=i},[i]),(0,s.useEffect)(()=>{K.current=d},[d]),(0,s.useEffect)(()=>{R.current=p},[p]),(0,s.useEffect)(()=>{let e=i.filter(t=>t.type==="channel").map(t=>t.name);localStorage.setItem("neoirc_channels",JSON.stringify(e))},[i]),(0,s.useEffect)(()=>{let e=i[d];e&&_(t=>({...t,[e.name]:0}))},[d,i]);let b=(0,s.useCallback)((e,t)=>{if(t.id&&V.current.has(t.id))return;t.id&&V.current.add(t.id),g(r=>({...r,[e]:[...r[e]||[],t]}));let n=w.current[K.current];(!n||n.name!==e)&&_(r=>({...r,[e]:(r[e]||0)+1}))},[]),S=(0,s.useCallback)((e,t)=>{g(n=>({...n,[e]:[...n[e]||[],{id:"sys-"+Date.now()+"-"+Math.random(),ts:new Date().toISOString(),text:t,system:!0}]}))},[]),I=(0,s.useCallback)(e=>{let t=e.replace("#","");u(`/channels/${t}/members`).then(n=>{T(r=>({...r,[e]:n}))}).catch(()=>{})},[]),E=(0,s.useCallback)(e=>{let t=Array.isArray(e.body)?e.body.join(`
-`):"",n={id:e.id,ts:e.ts,from:e.from,to:e.to,command:e.command};switch(e.command){case"PRIVMSG":case"NOTICE":{let r={...n,text:t,system:!1},c=e.to;if(c&&c.startsWith("#"))b(c,r);else{let l=e.from===R.current?e.to:e.from;h(O=>O.find(Q=>Q.type==="dm"&&Q.name===l)?O:[...O,{type:"dm",name:l}]),b(l,r)}break}case"JOIN":{let r=`${e.from} has joined ${e.to}`;e.to&&b(e.to,{...n,text:r,system:!0}),e.to&&e.to.startsWith("#")&&I(e.to);break}case"PART":{let r=t?": "+t:"",c=`${e.from} has left ${e.to}${r}`;e.to&&b(e.to,{...n,text:c,system:!0}),e.to&&e.to.startsWith("#")&&I(e.to);break}case"QUIT":{let r=t?": "+t:"",c=`${e.from} has quit${r}`;w.current.forEach(l=>{l.type==="channel"&&b(l.name,{...n,text:c,system:!0})});break}case"NICK":{let r=Array.isArray(e.body)?e.body[0]:t,c=`${e.from} is now known as ${r}`;w.current.forEach(l=>{l.type==="channel"&&b(l.name,{...n,text:c,system:!0})}),e.from===R.current&&r&&y(r),w.current.forEach(l=>{l.type==="channel"&&I(l.name)});break}case"TOPIC":{let r=`${e.from} set the topic: ${t}`;e.to&&(b(e.to,{...n,text:r,system:!0}),x(c=>({...c,[e.to]:t})));break}case"375":case"372":case"376":b("Server",{...n,text:t,system:!0});break;default:b("Server",{...n,text:t||e.command,system:!0})}},[b,I]);(0,s.useEffect)(()=>{if(!a)return;let e=!0;return(async()=>{for(;e;)try{let n=new AbortController;W.current=n;let r=await u(`/messages?after=${M.current}&timeout=${oe}`,{signal:n.signal});if(!e)break;if(U(!0),r.messages)for(let c of r.messages)E(c);r.last_id>M.current&&(M.current=r.last_id)}catch(n){if(!e)break;if(n.name==="AbortError")continue;U(!1),await new Promise(r=>setTimeout(r,ae))}})(),()=>{e=!1,W.current?.abort()}},[a,E]),(0,s.useEffect)(()=>{if(!a)return;let e=i[d];if(!e||e.type!=="channel")return;I(e.name);let t=setInterval(()=>I(e.name),ce);return()=>clearInterval(t)},[a,d,i,I]),(0,s.useEffect)(()=>{B.current?.scrollIntoView({behavior:"smooth"})},[$,d]),(0,s.useEffect)(()=>{F.current?.focus()},[d]),(0,s.useEffect)(()=>{if(!a)return;let e=i[d];!e||e.type!=="channel"||u("/channels").then(t=>{let n=t.find(r=>r.name===e.name);n&&n.topic&&x(r=>({...r,[e.name]:n.topic}))}).catch(()=>{})},[a,d,i]);let te=(0,s.useCallback)(async e=>{y(e),f(!0),S("Server",`Connected as ${e}`);let t=JSON.parse(localStorage.getItem("neoirc_channels")||"[]");for(let n of t)try{await u("/messages",{method:"POST",body:JSON.stringify({command:"JOIN",to:n})}),h(r=>r.find(c=>c.type==="channel"&&c.name===n)?r:[...r,{type:"channel",name:n}])}catch{}},[S]),P=async e=>{if(e){e=e.trim(),e.startsWith("#")||(e="#"+e);try{await u("/messages",{method:"POST",body:JSON.stringify({command:"JOIN",to:e})}),h(t=>t.find(n=>n.type==="channel"&&n.name===e)?t:[...t,{type:"channel",name:e}]),v(i.length);try{let t=await u(`/history?target=${encodeURIComponent(e)}&limit=50`);if(Array.isArray(t))for(let n of t)E(n)}catch{}D("")}catch(t){S("Server",`Failed to join ${e}: ${t.data?.error||"error"}`)}}},G=async e=>{try{await u("/messages",{method:"POST",body:JSON.stringify({command:"PART",to:e})})}catch{}h(t=>t.filter(n=>!(n.type==="channel"&&n.name===e))),v(0)},ne=e=>{let t=i[e];t.type==="channel"?G(t.name):t.type==="dm"&&(h(n=>n.filter((r,c)=>c!==e)),d>=e&&v(Math.max(0,d-1)))},q=e=>{h(n=>n.find(r=>r.type==="dm"&&r.name===e)?n:[...n,{type:"dm",name:e}]);let t=i.findIndex(n=>n.type==="dm"&&n.name===e);v(t>=0?t:i.length)},z=async()=>{let e=j.trim();if(!e)return;L("");let t=i[d];if(!(!t||t.type==="server")){if(e.startsWith("/")){let n=e.split(" "),r=n[0].toLowerCase();if(r==="/join"&&n[1]){P(n[1]);return}if(r==="/part"){t.type==="channel"&&G(t.name);return}if(r==="/msg"&&n[1]&&n.slice(2).join(" ")){let c=n[1],l=n.slice(2).join(" ");try{await u("/messages",{method:"POST",body:JSON.stringify({command:"PRIVMSG",to:c,body:[l]})}),q(c)}catch(O){S("Server",`DM failed: ${O.data?.error||"error"}`)}return}if(r==="/nick"&&n[1]){try{await u("/messages",{method:"POST",body:JSON.stringify({command:"NICK",body:[n[1]]})})}catch(c){S("Server",`Nick change failed: ${c.data?.error||"error"}`)}return}if(r==="/topic"&&t.type==="channel"){let c=n.slice(1).join(" ");try{await u("/messages",{method:"POST",body:JSON.stringify({command:"TOPIC",to:t.name,body:[c]})})}catch(l){S("Server",`Topic failed: ${l.data?.error||"error"}`)}return}S("Server",`Unknown command: ${r}`);return}try{await u("/messages",{method:"POST",body:JSON.stringify({command:"PRIVMSG",to:t.name,body:[e]})})}catch(n){S(t.name,`Send failed: ${n.data?.error||"error"}`)}}};if(!a)return(0,o.h)(ie,{onLogin:te});let k=i[d]||i[0],re=$[k.name]||[],H=N[k.name]||[],A=m[k.name]||"";return(0,o.h)("div",{class:"app"},(0,o.h)("div",{class:"tab-bar"},!ee&&(0,o.h)("div",{class:"connection-status"},"\u26A0 Reconnecting..."),i.map((e,t)=>(0,o.h)("div",{class:`tab ${t===d?"active":""}`,onClick:()=>v(t)},e.type==="dm"?`\u2192${e.name}`:e.name,J[e.name]>0&&t!==d&&(0,o.h)("span",{class:"unread-badge"},J[e.name]),e.type!=="server"&&(0,o.h)("span",{class:"close-btn",onClick:n=>{n.stopPropagation(),ne(t)}},"\xD7"))),(0,o.h)("div",{class:"join-dialog"},(0,o.h)("input",{placeholder:"#channel",value:C,onInput:e=>D(e.target.value),onKeyDown:e=>e.key==="Enter"&&P(C)}),(0,o.h)("button",{onClick:()=>P(C)},"Join"))),k.type==="channel"&&A&&(0,o.h)("div",{class:"topic-bar",title:A},A),(0,o.h)("div",{class:"content"},(0,o.h)("div",{class:"messages-pane"},(0,o.h)("div",{class:k.type==="server"?"server-messages":"messages"},re.map(e=>(0,o.h)(de,{msg:e})),(0,o.h)("div",{ref:B})),k.type!=="server"&&(0,o.h)("div",{class:"input-bar"},(0,o.h)("input",{ref:F,placeholder:`Message ${k.name}...`,value:j,onInput:e=>L(e.target.value),onKeyDown:e=>e.key==="Enter"&&z()}),(0,o.h)("button",{onClick:z},"Send"))),k.type==="channel"&&(0,o.h)("div",{class:"user-list"},(0,o.h)("h3",null,"Users (",H.length,")"),H.map(e=>(0,o.h)("div",{class:"user",onClick:()=>q(e.nick),style:{color:Z(e.nick)}},e.nick)))))}(0,o.render)((0,o.h)(le,null),document.getElementById("root"));})();
+var _e,k,$e,it,q,Ee,Ae,He,Oe,he,fe,de,ct,X={},Re=[],at=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,se=Array.isArray;function F(e,t){for(var n in t)e[n]=t[n];return e}function me(e){e&&e.parentNode&&e.parentNode.removeChild(e)}function y(e,t,n){var r,i,_,c={};for(_ in t)_=="key"?r=t[_]:_=="ref"?i=t[_]:c[_]=t[_];if(arguments.length>2&&(c.children=arguments.length>3?_e.call(arguments,2):n),typeof e=="function"&&e.defaultProps!=null)for(_ in e.defaultProps)c[_]===void 0&&(c[_]=e.defaultProps[_]);return ne(e,c,r,i,null)}function ne(e,t,n,r,i){var _={type:e,props:t,key:n,ref:r,__k:null,__:null,__b:0,__e:null,__c:null,constructor:void 0,__v:i??++$e,__i:-1,__u:0};return i==null&&k.vnode!=null&&k.vnode(_),_}function ie(e){return e.children}function oe(e,t){this.props=e,this.context=t}function z(e,t){if(t==null)return e.__?z(e.__,e.__i+1):null;for(var n;t<e.__k.length;t++)if((n=e.__k[t])!=null&&n.__e!=null)return n.__e;return typeof e.type=="function"?z(e):null}function De(e){var t,n;if((e=e.__)!=null&&e.__c!=null){for(e.__e=e.__c.base=null,t=0;t<e.__k.length;t++)if((n=e.__k[t])!=null&&n.__e!=null){e.__e=e.__c.base=n.__e;break}return De(e)}}function Pe(e){(!e.__d&&(e.__d=!0)&&q.push(e)&&!re.__r++||Ee!=k.debounceRendering)&&((Ee=k.debounceRendering)||Ae)(re)}function re(){for(var e,t,n,r,i,_,c,u=1;q.length;)q.length>u&&q.sort(He),e=q.shift(),u=q.length,e.__d&&(n=void 0,r=void 0,i=(r=(t=e).__v).__e,_=[],c=[],t.__P&&((n=F({},r)).__v=r.__v+1,k.vnode&&k.vnode(n),ve(t.__P,n,r,t.__n,t.__P.namespaceURI,32&r.__u?[i]:null,_,i??z(r),!!(32&r.__u),c),n.__v=r.__v,n.__.__k[n.__i]=n,Fe(_,n,c),r.__e=r.__=null,n.__e!=i&&De(n)));re.__r=0}function Ue(e,t,n,r,i,_,c,u,m,a,v){var s,p,h,w,P,T,g,b=r&&r.__k||Re,A=t.length;for(m=lt(n,t,b,m,A),s=0;s<A;s++)(h=n.__k[s])!=null&&(p=h.__i==-1?X:b[h.__i]||X,h.__i=s,T=ve(e,h,p,i,_,c,u,m,a,v),w=h.__e,h.ref&&p.ref!=h.ref&&(p.ref&&ye(p.ref,null,h),v.push(h.ref,h.__c||w,h)),P==null&&w!=null&&(P=w),(g=!!(4&h.__u))||p.__k===h.__k?m=Le(h,m,e,g):typeof h.type=="function"&&T!==void 0?m=T:w&&(m=w.nextSibling),h.__u&=-7);return n.__e=P,m}function lt(e,t,n,r,i){var _,c,u,m,a,v=n.length,s=v,p=0;for(e.__k=new Array(i),_=0;_<i;_++)(c=t[_])!=null&&typeof c!="boolean"&&typeof c!="function"?(typeof c=="string"||typeof c=="number"||typeof c=="bigint"||c.constructor==String?c=e.__k[_]=ne(null,c,null,null,null):se(c)?c=e.__k[_]=ne(ie,{children:c},null,null,null):c.constructor===void 0&&c.__b>0?c=e.__k[_]=ne(c.type,c.props,c.key,c.ref?c.ref:null,c.__v):e.__k[_]=c,m=_+p,c.__=e,c.__b=e.__b+1,u=null,(a=c.__i=ut(c,n,m,s))!=-1&&(s--,(u=n[a])&&(u.__u|=2)),u==null||u.__v==null?(a==-1&&(i>v?p--:i<v&&p++),typeof c.type!="function"&&(c.__u|=4)):a!=m&&(a==m-1?p--:a==m+1?p++:(a>m?p--:p++,c.__u|=4))):e.__k[_]=null;if(s)for(_=0;_<v;_++)(u=n[_])!=null&&(2&u.__u)==0&&(u.__e==r&&(r=z(u)),je(u,u));return r}function Le(e,t,n,r){var i,_;if(typeof e.type=="function"){for(i=e.__k,_=0;i&&_<i.length;_++)i[_]&&(i[_].__=e,t=Le(i[_],t,n,r));return t}e.__e!=t&&(r&&(t&&e.type&&!t.parentNode&&(t=z(e)),n.insertBefore(e.__e,t||null)),t=e.__e);do t=t&&t.nextSibling;while(t!=null&&t.nodeType==8);return t}function ut(e,t,n,r){var i,_,c,u=e.key,m=e.type,a=t[n],v=a!=null&&(2&a.__u)==0;if(a===null&&u==null||v&&u==a.key&&m==a.type)return n;if(r>(v?1:0)){for(i=n-1,_=n+1;i>=0||_<t.length;)if((a=t[c=i>=0?i--:_++])!=null&&(2&a.__u)==0&&u==a.key&&m==a.type)return c}return-1}function Ne(e,t,n){t[0]=="-"?e.setProperty(t,n??""):e[t]=n==null?"":typeof n!="number"||at.test(t)?n:n+"px"}function te(e,t,n,r,i){var _,c;e:if(t=="style")if(typeof n=="string")e.style.cssText=n;else{if(typeof r=="string"&&(e.style.cssText=r=""),r)for(t in r)n&&t in n||Ne(e.style,t,"");if(n)for(t in n)r&&n[t]==r[t]||Ne(e.style,t,n[t])}else if(t[0]=="o"&&t[1]=="n")_=t!=(t=t.replace(Oe,"$1")),c=t.toLowerCase(),t=c in e||t=="onFocusOut"||t=="onFocusIn"?c.slice(2):t.slice(2),e.l||(e.l={}),e.l[t+_]=n,n?r?n.u=r.u:(n.u=he,e.addEventListener(t,_?de:fe,_)):e.removeEventListener(t,_?de:fe,_);else{if(i=="http://www.w3.org/2000/svg")t=t.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if(t!="width"&&t!="height"&&t!="href"&&t!="list"&&t!="form"&&t!="tabIndex"&&t!="download"&&t!="rowSpan"&&t!="colSpan"&&t!="role"&&t!="popover"&&t in e)try{e[t]=n??"";break e}catch{}typeof n=="function"||(n==null||n===!1&&t[4]!="-"?e.removeAttribute(t):e.setAttribute(t,t=="popover"&&n==1?"":n))}}function Me(e){return function(t){if(this.l){var n=this.l[t.type+e];if(t.t==null)t.t=he++;else if(t.t<n.u)return;return n(k.event?k.event(t):t)}}}function ve(e,t,n,r,i,_,c,u,m,a){var v,s,p,h,w,P,T,g,b,A,D,J,U,Q,V,H,K,N=t.type;if(t.constructor!==void 0)return null;128&n.__u&&(m=!!(32&n.__u),_=[u=t.__e=n.__e]),(v=k.__b)&&v(t);e:if(typeof N=="function")try{if(g=t.props,b="prototype"in N&&N.prototype.render,A=(v=N.contextType)&&r[v.__c],D=v?A?A.props.value:v.__:r,n.__c?T=(s=t.__c=n.__c).__=s.__E:(b?t.__c=s=new N(g,D):(t.__c=s=new oe(g,D),s.constructor=N,s.render=dt),A&&A.sub(s),s.state||(s.state={}),s.__n=r,p=s.__d=!0,s.__h=[],s._sb=[]),b&&s.__s==null&&(s.__s=s.state),b&&N.getDerivedStateFromProps!=null&&(s.__s==s.state&&(s.__s=F({},s.__s)),F(s.__s,N.getDerivedStateFromProps(g,s.__s))),h=s.props,w=s.state,s.__v=t,p)b&&N.getDerivedStateFromProps==null&&s.componentWillMount!=null&&s.componentWillMount(),b&&s.componentDidMount!=null&&s.__h.push(s.componentDidMount);else{if(b&&N.getDerivedStateFromProps==null&&g!==h&&s.componentWillReceiveProps!=null&&s.componentWillReceiveProps(g,D),t.__v==n.__v||!s.__e&&s.shouldComponentUpdate!=null&&s.shouldComponentUpdate(g,s.__s,D)===!1){for(t.__v!=n.__v&&(s.props=g,s.state=s.__s,s.__d=!1),t.__e=n.__e,t.__k=n.__k,t.__k.some(function(L){L&&(L.__=t)}),J=0;J<s._sb.length;J++)s.__h.push(s._sb[J]);s._sb=[],s.__h.length&&c.push(s);break e}s.componentWillUpdate!=null&&s.componentWillUpdate(g,s.__s,D),b&&s.componentDidUpdate!=null&&s.__h.push(function(){s.componentDidUpdate(h,w,P)})}if(s.context=D,s.props=g,s.__P=e,s.__e=!1,U=k.__r,Q=0,b){for(s.state=s.__s,s.__d=!1,U&&U(t),v=s.render(s.props,s.state,s.context),V=0;V<s._sb.length;V++)s.__h.push(s._sb[V]);s._sb=[]}else do s.__d=!1,U&&U(t),v=s.render(s.props,s.state,s.context),s.state=s.__s;while(s.__d&&++Q<25);s.state=s.__s,s.getChildContext!=null&&(r=F(F({},r),s.getChildContext())),b&&!p&&s.getSnapshotBeforeUpdate!=null&&(P=s.getSnapshotBeforeUpdate(h,w)),H=v,v!=null&&v.type===ie&&v.key==null&&(H=We(v.props.children)),u=Ue(e,se(H)?H:[H],t,n,r,i,_,c,u,m,a),s.base=t.__e,t.__u&=-161,s.__h.length&&c.push(s),T&&(s.__E=s.__=null)}catch(L){if(t.__v=null,m||_!=null)if(L.then){for(t.__u|=m?160:128;u&&u.nodeType==8&&u.nextSibling;)u=u.nextSibling;_[_.indexOf(u)]=null,t.__e=u}else{for(K=_.length;K--;)me(_[K]);pe(t)}else t.__e=n.__e,t.__k=n.__k,L.then||pe(t);k.__e(L,t,n)}else _==null&&t.__v==n.__v?(t.__k=n.__k,t.__e=n.__e):u=t.__e=ft(n.__e,t,n,r,i,_,c,m,a);return(v=k.diffed)&&v(t),128&t.__u?void 0:u}function pe(e){e&&e.__c&&(e.__c.__e=!0),e&&e.__k&&e.__k.forEach(pe)}function Fe(e,t,n){for(var r=0;r<n.length;r++)ye(n[r],n[++r],n[++r]);k.__c&&k.__c(t,e),e.some(function(i){try{e=i.__h,i.__h=[],e.some(function(_){_.call(i)})}catch(_){k.__e(_,i.__v)}})}function We(e){return typeof e!="object"||e==null||e.__b&&e.__b>0?e:se(e)?e.map(We):F({},e)}function ft(e,t,n,r,i,_,c,u,m){var a,v,s,p,h,w,P,T=n.props||X,g=t.props,b=t.type;if(b=="svg"?i="http://www.w3.org/2000/svg":b=="math"?i="http://www.w3.org/1998/Math/MathML":i||(i="http://www.w3.org/1999/xhtml"),_!=null){for(a=0;a<_.length;a++)if((h=_[a])&&"setAttribute"in h==!!b&&(b?h.localName==b:h.nodeType==3)){e=h,_[a]=null;break}}if(e==null){if(b==null)return document.createTextNode(g);e=document.createElementNS(i,b,g.is&&g),u&&(k.__m&&k.__m(t,_),u=!1),_=null}if(b==null)T===g||u&&e.data==g||(e.data=g);else{if(_=_&&_e.call(e.childNodes),!u&&_!=null)for(T={},a=0;a<e.attributes.length;a++)T[(h=e.attributes[a]).name]=h.value;for(a in T)if(h=T[a],a!="children"){if(a=="dangerouslySetInnerHTML")s=h;else if(!(a in g)){if(a=="value"&&"defaultValue"in g||a=="checked"&&"defaultChecked"in g)continue;te(e,a,null,h,i)}}for(a in g)h=g[a],a=="children"?p=h:a=="dangerouslySetInnerHTML"?v=h:a=="value"?w=h:a=="checked"?P=h:u&&typeof h!="function"||T[a]===h||te(e,a,h,T[a],i);if(v)u||s&&(v.__html==s.__html||v.__html==e.innerHTML)||(e.innerHTML=v.__html),t.__k=[];else if(s&&(e.innerHTML=""),Ue(t.type=="template"?e.content:e,se(p)?p:[p],t,n,r,b=="foreignObject"?"http://www.w3.org/1999/xhtml":i,_,c,_?_[0]:n.__k&&z(n,0),u,m),_!=null)for(a=_.length;a--;)me(_[a]);u||(a="value",b=="progress"&&w==null?e.removeAttribute("value"):w!=null&&(w!==e[a]||b=="progress"&&!w||b=="option"&&w!=T[a])&&te(e,a,w,T[a],i),a="checked",P!=null&&P!=e[a]&&te(e,a,P,T[a],i))}return e}function ye(e,t,n){try{if(typeof e=="function"){var r=typeof e.__u=="function";r&&e.__u(),r&&t==null||(e.__u=e(t))}else e.current=t}catch(i){k.__e(i,n)}}function je(e,t,n){var r,i;if(k.unmount&&k.unmount(e),(r=e.ref)&&(r.current&&r.current!=e.__e||ye(r,null,t)),(r=e.__c)!=null){if(r.componentWillUnmount)try{r.componentWillUnmount()}catch(_){k.__e(_,t)}r.base=r.__P=null}if(r=e.__k)for(i=0;i<r.length;i++)r[i]&&je(r[i],t,n||typeof e.type!="function");n||me(e.__e),e.__c=e.__=e.__e=void 0}function dt(e,t,n){return this.constructor(e,n)}function Je(e,t,n){var r,i,_,c;t==document&&(t=document.documentElement),k.__&&k.__(e,t),i=(r=typeof n=="function")?null:n&&n.__k||t.__k,_=[],c=[],ve(t,e=(!r&&n||t).__k=y(ie,null,[e]),i||X,X,t.namespaceURI,!r&&n?[n]:i?null:t.firstChild?_e.call(t.childNodes):null,_,!r&&n?n:i?i.__e:t.firstChild,r,c),Fe(_,e,c)}_e=Re.slice,k={__e:function(e,t,n,r){for(var i,_,c;t=t.__;)if((i=t.__c)&&!i.__)try{if((_=i.constructor)&&_.getDerivedStateFromError!=null&&(i.setState(_.getDerivedStateFromError(e)),c=i.__d),i.componentDidCatch!=null&&(i.componentDidCatch(e,r||{}),c=i.__d),c)return i.__E=i}catch(u){e=u}throw e}},$e=0,it=function(e){return e!=null&&e.constructor===void 0},oe.prototype.setState=function(e,t){var n;n=this.__s!=null&&this.__s!=this.state?this.__s:this.__s=F({},this.state),typeof e=="function"&&(e=e(F({},n),this.props)),e&&F(n,e),e!=null&&this.__v&&(t&&this._sb.push(t),Pe(this))},oe.prototype.forceUpdate=function(e){this.__v&&(this.__e=!0,e&&this.__h.push(e),Pe(this))},oe.prototype.render=ie,q=[],Ae=typeof Promise=="function"?Promise.prototype.then.bind(Promise.resolve()):setTimeout,He=function(e,t){return e.__v.__b-t.__v.__b},re.__r=0,Oe=/(PointerCapture)$|Capture$/i,he=0,fe=Me(!1),de=Me(!0),ct=0;var Z,C,be,Ve,ee=0,Xe=[],I=k,Be=I.__b,qe=I.__r,Ke=I.diffed,ze=I.__c,Ge=I.unmount,Qe=I.__;function ke(e,t){I.__h&&I.__h(C,e,ee||t),ee=0;var n=C.__H||(C.__H={__:[],__h:[]});return e>=n.__.length&&n.__.push({}),n.__[e]}function E(e){return ee=1,pt(tt,e)}function pt(e,t,n){var r=ke(Z++,2);if(r.t=e,!r.__c&&(r.__=[n?n(t):tt(void 0,t),function(u){var m=r.__N?r.__N[0]:r.__[0],a=r.t(m,u);m!==a&&(r.__N=[a,r.__[1]],r.__c.setState({}))}],r.__c=C,!C.__f)){var i=function(u,m,a){if(!r.__c.__H)return!0;var v=r.__c.__H.__.filter(function(p){return!!p.__c});if(v.every(function(p){return!p.__N}))return!_||_.call(this,u,m,a);var s=r.__c.props!==u;return v.forEach(function(p){if(p.__N){var h=p.__[0];p.__=p.__N,p.__N=void 0,h!==p.__[0]&&(s=!0)}}),_&&_.call(this,u,m,a)||s};C.__f=!0;var _=C.shouldComponentUpdate,c=C.componentWillUpdate;C.componentWillUpdate=function(u,m,a){if(this.__e){var v=_;_=void 0,i(u,m,a),_=v}c&&c.call(this,u,m,a)},C.shouldComponentUpdate=i}return r.__N||r.__}function $(e,t){var n=ke(Z++,3);!I.__s&&et(n.__H,t)&&(n.__=e,n.u=t,C.__H.__h.push(n))}function R(e){return ee=5,Ze(function(){return{current:e}},[])}function Ze(e,t){var n=ke(Z++,7);return et(n.__H,t)&&(n.__=e(),n.__H=t,n.__h=e),n.__}function G(e,t){return ee=8,Ze(function(){return e},t)}function ht(){for(var e;e=Xe.shift();)if(e.__P&&e.__H)try{e.__H.__h.forEach(ce),e.__H.__h.forEach(ge),e.__H.__h=[]}catch(t){e.__H.__h=[],I.__e(t,e.__v)}}I.__b=function(e){C=null,Be&&Be(e)},I.__=function(e,t){e&&t.__k&&t.__k.__m&&(e.__m=t.__k.__m),Qe&&Qe(e,t)},I.__r=function(e){qe&&qe(e),Z=0;var t=(C=e.__c).__H;t&&(be===C?(t.__h=[],C.__h=[],t.__.forEach(function(n){n.__N&&(n.__=n.__N),n.u=n.__N=void 0})):(t.__h.forEach(ce),t.__h.forEach(ge),t.__h=[],Z=0)),be=C},I.diffed=function(e){Ke&&Ke(e);var t=e.__c;t&&t.__H&&(t.__H.__h.length&&(Xe.push(t)!==1&&Ve===I.requestAnimationFrame||((Ve=I.requestAnimationFrame)||mt)(ht)),t.__H.__.forEach(function(n){n.u&&(n.__H=n.u),n.u=void 0})),be=C=null},I.__c=function(e,t){t.some(function(n){try{n.__h.forEach(ce),n.__h=n.__h.filter(function(r){return!r.__||ge(r)})}catch(r){t.some(function(i){i.__h&&(i.__h=[])}),t=[],I.__e(r,n.__v)}}),ze&&ze(e,t)},I.unmount=function(e){Ge&&Ge(e);var t,n=e.__c;n&&n.__H&&(n.__H.__.forEach(function(r){try{ce(r)}catch(i){t=i}}),n.__H=void 0,t&&I.__e(t,n.__v))};var Ye=typeof requestAnimationFrame=="function";function mt(e){var t,n=function(){clearTimeout(r),Ye&&cancelAnimationFrame(t),setTimeout(e)},r=setTimeout(n,35);Ye&&(t=requestAnimationFrame(n))}function ce(e){var t=C,n=e.__c;typeof n=="function"&&(e.__c=void 0,n()),C=t}function ge(e){var t=C;e.__c=e.__(),C=t}function et(e,t){return!e||e.length!==t.length||t.some(function(n,r){return n!==e[r]})}function tt(e,t){return typeof t=="function"?t(e):t}var vt="/api/v1",yt=15,bt=3e3,gt=1e4;function M(e,t={}){let n=localStorage.getItem("neoirc_token"),r={"Content-Type":"application/json",...t.headers||{}};n&&(r.Authorization=`Bearer ${n}`);let{signal:i,..._}=t;return fetch(vt+e,{..._,headers:r,signal:i}).then(async c=>{let u=await c.json().catch(()=>null);if(!c.ok)throw{status:c.status,data:u};return u})}function nt(e){return new Date(e).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit",second:"2-digit"})}function ot(e){let t=0;for(let r=0;r<e.length;r++)t=e.charCodeAt(r)+((t<<5)-t);return`hsl(${Math.abs(t)%360}, 70%, 65%)`}function kt({onLogin:e}){let[t,n]=E(""),[r,i]=E(""),[_,c]=E(""),[u,m]=E("NeoIRC"),a=R();return $(()=>{M("/server").then(p=>{p.name&&m(p.name),p.motd&&c(p.motd)}).catch(()=>{}),localStorage.getItem("neoirc_token")&&M("/state").then(p=>e(p.nick)).catch(()=>localStorage.removeItem("neoirc_token")),a.current?.focus()},[]),y("div",{class:"login-screen"},y("h1",null,u),_&&y("div",{class:"motd"},_),y("form",{onSubmit:async s=>{s.preventDefault(),i("");try{let p=await M("/session",{method:"POST",body:JSON.stringify({nick:t.trim()})});localStorage.setItem("neoirc_token",p.token),e(p.nick)}catch(p){i(p.data?.error||"Connection failed")}}},y("input",{ref:a,type:"text",placeholder:"Choose a nickname...",value:t,onInput:s=>n(s.target.value),maxLength:32,autoFocus:!0}),y("button",{type:"submit"},"Connect")),r&&y("div",{class:"error"},r))}function St({msg:e}){return e.system?y("div",{class:"message system"},y("span",{class:"timestamp"},nt(e.ts)),y("span",{class:"content"},e.text)):y("div",{class:"message"},y("span",{class:"timestamp"},nt(e.ts)),y("span",{class:"nick",style:{color:ot(e.from)}},e.from),y("span",{class:"content"},e.text))}function wt(){let[e,t]=E(!1),[n,r]=E(""),[i,_]=E([{type:"server",name:"Server"}]),[c,u]=E(0),[m,a]=E({Server:[]}),[v,s]=E({}),[p,h]=E({}),[w,P]=E({}),[T,g]=E(""),[b,A]=E(""),[D,J]=E(!0),U=R(0),Q=R(new Set),V=R(null),H=R(i),K=R(c),N=R(n),L=R(),Se=R();$(()=>{H.current=i},[i]),$(()=>{K.current=c},[c]),$(()=>{N.current=n},[n]),$(()=>{let o=i.filter(l=>l.type==="channel").map(l=>l.name);localStorage.setItem("neoirc_channels",JSON.stringify(o))},[i]),$(()=>{let o=i[c];o&&P(l=>({...l,[o.name]:0}))},[c,i]);let O=G((o,l)=>{if(l.id&&Q.current.has(l.id))return;l.id&&Q.current.add(l.id),a(d=>({...d,[o]:[...d[o]||[],l]}));let f=H.current[K.current];(!f||f.name!==o)&&P(d=>({...d,[o]:(d[o]||0)+1}))},[]),W=G((o,l)=>{a(f=>({...f,[o]:[...f[o]||[],{id:"sys-"+Date.now()+"-"+Math.random(),ts:new Date().toISOString(),text:l,system:!0}]}))},[]),B=G(o=>{let l=o.replace("#","");M(`/channels/${l}/members`).then(f=>{s(d=>({...d,[o]:f}))}).catch(()=>{})},[]),ae=G(o=>{let l=Array.isArray(o.body)?o.body.join(`
+`):"",f={id:o.id,ts:o.ts,from:o.from,to:o.to,command:o.command};switch(o.command){case"PRIVMSG":case"NOTICE":{let d={...f,text:l,system:!1},S=o.to;if(S&&S.startsWith("#"))O(S,d);else{let x=o.from===N.current?o.to:o.from;_(Y=>Y.find(xe=>xe.type==="dm"&&xe.name===x)?Y:[...Y,{type:"dm",name:x}]),O(x,d)}break}case"JOIN":{let d=`${o.from} has joined ${o.to}`;o.to&&O(o.to,{...f,text:d,system:!0}),o.to&&o.to.startsWith("#")&&B(o.to);break}case"PART":{let d=l?": "+l:"",S=`${o.from} has left ${o.to}${d}`;o.to&&O(o.to,{...f,text:S,system:!0}),o.to&&o.to.startsWith("#")&&B(o.to);break}case"QUIT":{let d=l?": "+l:"",S=`${o.from} has quit${d}`;H.current.forEach(x=>{x.type==="channel"&&O(x.name,{...f,text:S,system:!0})});break}case"NICK":{let d=Array.isArray(o.body)?o.body[0]:l,S=`${o.from} is now known as ${d}`;H.current.forEach(x=>{x.type==="channel"&&O(x.name,{...f,text:S,system:!0})}),o.from===N.current&&d&&r(d),H.current.forEach(x=>{x.type==="channel"&&B(x.name)});break}case"TOPIC":{let d=`${o.from} set the topic: ${l}`;o.to&&(O(o.to,{...f,text:d,system:!0}),h(S=>({...S,[o.to]:l})));break}case"375":case"372":case"376":O("Server",{...f,text:l,system:!0});break;default:O("Server",{...f,text:l||o.command,system:!0})}},[O,B]);$(()=>{if(!e)return;let o=!0;return(async()=>{for(;o;)try{let f=new AbortController;V.current=f;let d=await M(`/messages?after=${U.current}&timeout=${yt}`,{signal:f.signal});if(!o)break;if(J(!0),d.messages)for(let S of d.messages)ae(S);d.last_id>U.current&&(U.current=d.last_id)}catch(f){if(!o)break;if(f.name==="AbortError")continue;J(!1),await new Promise(d=>setTimeout(d,bt))}})(),()=>{o=!1,V.current?.abort()}},[e,ae]),$(()=>{if(!e)return;let o=i[c];if(!o||o.type!=="channel")return;B(o.name);let l=setInterval(()=>B(o.name),gt);return()=>clearInterval(l)},[e,c,i,B]),$(()=>{L.current?.scrollIntoView({behavior:"smooth"})},[m,c]),$(()=>{Se.current?.focus()},[c]),$(()=>{if(!e)return;let o=i[c];!o||o.type!=="channel"||M("/channels").then(l=>{let f=l.find(d=>d.name===o.name);f&&f.topic&&h(d=>({...d,[o.name]:f.topic}))}).catch(()=>{})},[e,c,i]);let rt=G(async o=>{r(o),t(!0),W("Server",`Connected as ${o}`);let l=JSON.parse(localStorage.getItem("neoirc_channels")||"[]");for(let f of l)try{await M("/messages",{method:"POST",body:JSON.stringify({command:"JOIN",to:f})}),_(d=>d.find(S=>S.type==="channel"&&S.name===f)?d:[...d,{type:"channel",name:f}])}catch{}},[W]),le=async o=>{if(o){o=o.trim(),o.startsWith("#")||(o="#"+o);try{await M("/messages",{method:"POST",body:JSON.stringify({command:"JOIN",to:o})}),_(l=>l.find(f=>f.type==="channel"&&f.name===o)?l:[...l,{type:"channel",name:o}]),u(i.length);try{let l=await M(`/history?target=${encodeURIComponent(o)}&limit=50`);if(Array.isArray(l))for(let f of l)ae(f)}catch{}A("")}catch(l){W("Server",`Failed to join ${o}: ${l.data?.error||"error"}`)}}},we=async o=>{try{await M("/messages",{method:"POST",body:JSON.stringify({command:"PART",to:o})})}catch{}_(l=>l.filter(f=>!(f.type==="channel"&&f.name===o))),u(0)},_t=o=>{let l=i[o];l.type==="channel"?we(l.name):l.type==="dm"&&(_(f=>f.filter((d,S)=>S!==o)),c>=o&&u(Math.max(0,c-1)))},Ce=o=>{_(f=>f.find(d=>d.type==="dm"&&d.name===o)?f:[...f,{type:"dm",name:o}]);let l=i.findIndex(f=>f.type==="dm"&&f.name===o);u(l>=0?l:i.length)},Te=async()=>{let o=T.trim();if(!o)return;g("");let l=i[c];if(!(!l||l.type==="server")){if(o.startsWith("/")){let f=o.split(" "),d=f[0].toLowerCase();if(d==="/join"&&f[1]){le(f[1]);return}if(d==="/part"){l.type==="channel"&&we(l.name);return}if(d==="/msg"&&f[1]&&f.slice(2).join(" ")){let S=f[1],x=f.slice(2).join(" ");try{await M("/messages",{method:"POST",body:JSON.stringify({command:"PRIVMSG",to:S,body:[x]})}),Ce(S)}catch(Y){W("Server",`DM failed: ${Y.data?.error||"error"}`)}return}if(d==="/nick"&&f[1]){try{await M("/messages",{method:"POST",body:JSON.stringify({command:"NICK",body:[f[1]]})})}catch(S){W("Server",`Nick change failed: ${S.data?.error||"error"}`)}return}if(d==="/topic"&&l.type==="channel"){let S=f.slice(1).join(" ");try{await M("/messages",{method:"POST",body:JSON.stringify({command:"TOPIC",to:l.name,body:[S]})})}catch(x){W("Server",`Topic failed: ${x.data?.error||"error"}`)}return}W("Server",`Unknown command: ${d}`);return}try{await M("/messages",{method:"POST",body:JSON.stringify({command:"PRIVMSG",to:l.name,body:[o]})})}catch(f){W(l.name,`Send failed: ${f.data?.error||"error"}`)}}};if(!e)return y(kt,{onLogin:rt});let j=i[c]||i[0],st=m[j.name]||[],Ie=v[j.name]||[],ue=p[j.name]||"";return y("div",{class:"app"},y("div",{class:"tab-bar"},!D&&y("div",{class:"connection-status"},"\u26A0 Reconnecting..."),i.map((o,l)=>y("div",{class:`tab ${l===c?"active":""}`,onClick:()=>u(l)},o.type==="dm"?`\u2192${o.name}`:o.name,w[o.name]>0&&l!==c&&y("span",{class:"unread-badge"},w[o.name]),o.type!=="server"&&y("span",{class:"close-btn",onClick:f=>{f.stopPropagation(),_t(l)}},"\xD7"))),y("div",{class:"join-dialog"},y("input",{placeholder:"#channel",value:b,onInput:o=>A(o.target.value),onKeyDown:o=>o.key==="Enter"&&le(b)}),y("button",{onClick:()=>le(b)},"Join"))),j.type==="channel"&&ue&&y("div",{class:"topic-bar",title:ue},ue),y("div",{class:"content"},y("div",{class:"messages-pane"},y("div",{class:j.type==="server"?"server-messages":"messages"},st.map(o=>y(St,{msg:o})),y("div",{ref:L})),j.type!=="server"&&y("div",{class:"input-bar"},y("input",{ref:Se,placeholder:`Message ${j.name}...`,value:T,onInput:o=>g(o.target.value),onKeyDown:o=>o.key==="Enter"&&Te()}),y("button",{onClick:Te},"Send"))),j.type==="channel"&&y("div",{class:"user-list"},y("h3",null,"Users (",Ie.length,")"),Ie.map(o=>y("div",{class:"user",onClick:()=>Ce(o.nick),style:{color:ot(o.nick)}},o.nick)))))}Je(y(wt,null),document.getElementById("root"));
diff --git a/web/dist/index.html b/web/dist/index.html
index 282793f..13cfc93 100644
--- a/web/dist/index.html
+++ b/web/dist/index.html
@@ -8,6 +8,6 @@
 </head>
 <body>
   <div id="root"></div>
-  <script src="/app.js"></script>
+  <script type="module" src="/app.js"></script>
 </body>
 </html>
diff --git a/web/src/index.html b/web/src/index.html
index 282793f..13cfc93 100644
--- a/web/src/index.html
+++ b/web/src/index.html
@@ -8,6 +8,6 @@
 </head>
 <body>
   <div id="root"></div>
-  <script src="/app.js"></script>
+  <script type="module" src="/app.js"></script>
 </body>
 </html>