agent-comms 3.19.0 → 3.21.0

package/dist/bridges/user/web/{frontend → dist}/index.html

@@ -6,10 +6,10 @@
 <title>Agent Comms</title>
 <meta name="theme-color" content="#16213e">
 <link rel="manifest" href="./manifest.json">
+  <script type="module" crossorigin src="/bundle.js"></script>
 </head>
 <body>
 <div id="root"></div>
-<script src="./bundle.js"></script>
 <script>
 if ("serviceWorker" in navigator) {
   window.addEventListener("load", function () {

package/dist/bridges/user/web/dist/mesh-worker.js

@@ -1 +1 @@
-"use strict";(()=>{var r=new Map,c=new Map,i=new Map,a=new Map;function p(e){for(let[t,s]of Object.entries(e.agents))r.set(t,s);for(let[t,s]of Object.entries(e.rooms))c.set(t,s);for(let[t,s]of Object.entries(e.messages))i.set(t,s);for(let[t,s]of Object.entries(e.dms))a.set(t,s)}function l(e){switch(e.type){case"agent_upsert":r.set(e.agent.id,e.agent);break;case"agent_offline":{let t=r.get(e.agentId);t&&(t.status="offline",r.set(e.agentId,t));break}case"room_upsert":c.set(e.room.id,e.room);break;case"room_delete":c.delete(e.roomId);break;case"message_add":{let t=i.get(e.roomId)??[];t.push(e.message),i.set(e.roomId,t);break}case"dm_add":{let t=a.get(e.key)??[];t.push(e.message),a.set(e.key,t);break}case"delivery":break;case"message_read":{if(e.room!==void 0){let t=i.get(e.room);if(t){let s=t.find(n=>n.id===e.messageId);s&&!s.readBy.includes(e.readBy)&&s.readBy.push(e.readBy)}}else for(let[,t]of a){let s=t.find(n=>n.id===e.messageId);s&&!s.readBy.includes(e.readBy)&&s.readBy.push(e.readBy)}break}}}function y(){return{agents:[...r.values()],rooms:[...c.values()]}}var f,d,g;function u(e){g=e,d!==void 0&&(clearTimeout(d),d=void 0);let t=new WebSocket(e);f=t,t.onopen=()=>{o({type:"connected"})},t.onclose=()=>{f=void 0,o({type:"disconnected"}),S()},t.onerror=()=>{},t.onmessage=s=>{let n=JSON.parse(typeof s.data=="string"?s.data:String(s.data));k(n)}}var b=3e3;function S(){g!==void 0&&(d=setTimeout(()=>{g!==void 0&&u(g)},b))}function k(e){if(M(e)){e.method==="state_sync"?(p(e.state),o({type:"state",state:y()})):(l(e.patch),o({type:"patch",patch:e.patch}));return}typeof e=="object"&&e!==null&&"type"in e&&(e.type==="result"&&"result"in e&&typeof e.result=="object"&&e.result!==null&&"content"in e.result&&typeof e.result.content=="string"&&"isError"in e.result&&typeof e.result.isError=="boolean"?o({type:"actionResult",id:"",result:{content:e.result.content,isError:e.result.isError}}):e.type==="error"&&"message"in e&&typeof e.message=="string"&&o({type:"actionError",id:"",message:e.message}))}function M(e){if(typeof e!="object"||e===null||!("method"in e))return!1;let t=e.method;return typeof t=="string"&&(t==="state_sync"||t==="state_update")}var m=new Set;function o(e){let t=JSON.stringify(e);for(let s of m)try{s.postMessage(t)}catch{}}function v(e){switch(e.type){case"init":u(e.url);break;case"action":{f?.readyState===WebSocket.OPEN&&f.send(JSON.stringify(e.action));break}case"getState":o({type:"state",state:y()});break}}function h(e){if(typeof e!="object"||e===null||!("type"in e))return!1;let t=e.type;return typeof t=="string"&&(t==="init"||t==="action"||t==="getState")}typeof self<"u"&&self.addEventListener("connect",e=>{let t=e.ports[0];if(t!==void 0){m.add(t);try{t.postMessage(JSON.stringify({type:"state",state:y()}))}catch{}t.onmessage=s=>{let n=JSON.parse(typeof s.data=="string"?s.data:String(s.data));h(n)&&v(n)}}});})();
+var AgentCommsMeshWorker=(function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t=new Map,n=new Map,r=new Map,i=new Map;function a(e){for(let[n,r]of Object.entries(e.agents))t.set(n,r);for(let[t,r]of Object.entries(e.rooms))n.set(t,r);for(let[t,n]of Object.entries(e.messages))r.set(t,n);for(let[t,n]of Object.entries(e.dms))i.set(t,n)}function o(e){switch(e.type){case`agent_upsert`:t.set(e.agent.id,e.agent);break;case`agent_offline`:{let n=t.get(e.agentId);n&&(n.status=`offline`,t.set(e.agentId,n));break}case`room_upsert`:n.set(e.room.id,e.room);break;case`room_delete`:n.delete(e.roomId);break;case`message_add`:{let t=r.get(e.roomId)??[];t.push(e.message),r.set(e.roomId,t);break}case`dm_add`:{let t=i.get(e.key)??[];t.push(e.message),i.set(e.key,t);break}case`delivery`:break;case`message_read`:if(e.room!==void 0){let t=r.get(e.room);if(t){let n=t.find(t=>t.id===e.messageId);n&&!n.readBy.includes(e.readBy)&&n.readBy.push(e.readBy)}}else for(let[,t]of i){let n=t.find(t=>t.id===e.messageId);n&&!n.readBy.includes(e.readBy)&&n.readBy.push(e.readBy)}}}function s(){return{agents:[...t.values()],rooms:[...n.values()]}}var c,l,u;function d(e){u=e,l!==void 0&&(clearTimeout(l),l=void 0);let t=new WebSocket(e);c=t,t.onopen=()=>{_({type:`connected`})},t.onclose=()=>{c=void 0,_({type:`disconnected`}),p()},t.onerror=()=>{},t.onmessage=e=>{m(JSON.parse(typeof e.data==`string`?e.data:String(e.data)))}}var f=3e3;function p(){u!==void 0&&(l=setTimeout(()=>{u!==void 0&&d(u)},f))}function m(e){if(h(e)){e.method===`state_sync`?(a(e.state),_({type:`state`,state:s()})):(o(e.patch),_({type:`patch`,patch:e.patch}));return}typeof e==`object`&&e&&`type`in e&&(e.type===`result`&&`result`in e&&typeof e.result==`object`&&e.result!==null&&`content`in e.result&&typeof e.result.content==`string`&&`isError`in e.result&&typeof e.result.isError==`boolean`?_({type:`actionResult`,id:``,result:{content:e.result.content,isError:e.result.isError}}):e.type===`error`&&`message`in e&&typeof e.message==`string`&&_({type:`actionError`,id:``,message:e.message}))}function h(e){if(typeof e!=`object`||!e||!(`method`in e))return!1;let t=e.method;return typeof t==`string`&&(t===`state_sync`||t===`state_update`)}var g=new Set;function _(e){let t=JSON.stringify(e);for(let e of g)try{e.postMessage(t)}catch{}}function v(e){switch(e.type){case`init`:d(e.url);break;case`action`:c?.readyState===WebSocket.OPEN&&c.send(JSON.stringify(e.action));break;case`getState`:_({type:`state`,state:s()})}}function y(e){if(typeof e!=`object`||!e||!(`type`in e))return!1;let t=e.type;return typeof t==`string`&&(t===`init`||t===`action`||t===`getState`)}return typeof self<`u`&&self.addEventListener(`connect`,e=>{let t=e.ports[0];if(t!==void 0){g.add(t);try{t.postMessage(JSON.stringify({type:`state`,state:s()}))}catch{}t.onmessage=e=>{let t=JSON.parse(typeof e.data==`string`?e.data:String(e.data));y(t)&&v(t)}}}),e.agents=t,e.applyPatch=o,e.applyStateSync=a,e.dms=i,e.getStateSnapshot=s,e.messages=r,e.rooms=n,e})({});

package/dist/bridges/user/web/dist/sw.js

@@ -1 +1 @@
-"use strict";(()=>{var o="agent-comms-v1",c=["./","./bundle.js","./sw.js","./manifest.json","./icons/icon-96x96.svg","./icons/icon-192x192.svg","./icons/icon-512x512.svg"];self.addEventListener("install",e=>{e.waitUntil(self.caches.open(o).then(async n=>n.addAll(c)).then(async()=>self.skipWaiting()))});self.addEventListener("activate",e=>{e.waitUntil(self.caches.keys().then(async n=>Promise.all(n.filter(t=>t!==o).map(async t=>self.caches.delete(t)))))});var l=200,d=300;function a(e,n){return e.method==="GET"&&n.status>=l&&n.status<d}self.addEventListener("fetch",e=>{if(new URL(e.request.url).pathname.startsWith("/api/")){e.respondWith(fetch(e.request).then(t=>{if(a(e.request,t)){let i=t.clone();self.caches.open(o).then(async s=>s.put(e.request,i))}return t}).catch(async()=>self.caches.open(o).then(async t=>t.match(e.request)).then(t=>t??new Response("Offline",{status:503}))));return}e.respondWith(self.caches.open(o).then(async t=>t.match(e.request)).then(async t=>t||fetch(e.request).then(i=>{if(a(e.request,i)){let s=i.clone();self.caches.open(o).then(async r=>r.put(e.request,s))}return i})))});self.addEventListener("push",e=>{let n="Agent Comms",t="New message";if(e.data)try{let i=e.data.json();typeof i.title=="string"&&(n=i.title),typeof i.body=="string"&&(t=i.body)}catch{let i=e.data.text();i&&(t=i)}e.waitUntil(self.registration.showNotification(n,{body:t,data:{url:self.location.origin}}))});self.addEventListener("notificationclick",e=>{e.notification.close();let n=e.notification.data,t=typeof n=="object"&&n!==null&&"url"in n&&typeof n.url=="string"?n.url:self.location.origin;e.waitUntil(self.clients.matchAll({type:"window",includeUncontrolled:!0}).then(async i=>{for(let s of i)if(s.url===t&&"focus"in s)return s.focus();return self.clients.openWindow(t)}))});})();
+var e=`agent-comms-v1`,t=[{"revision":"7efa9980ba0b02137565a56208e14f7b","url":"mesh-worker.js"},{"revision":"f1ee3afb8c9e8f0d7315fd93d6457316","url":"index.html"},{"revision":"c8581eb68732d5f03e4c7af10080357a","url":"bundle.js"}].map(e=>e.url);self.addEventListener(`install`,n=>{n.waitUntil(self.caches.open(e).then(async e=>e.addAll(t)).then(async()=>self.skipWaiting()))}),self.addEventListener(`activate`,t=>{t.waitUntil(self.caches.keys().then(async t=>Promise.all(t.filter(t=>t!==e).map(async e=>self.caches.delete(e)))))});var n=200,r=300;function i(e,t){return e.method===`GET`&&t.status>=n&&t.status<r}self.addEventListener(`fetch`,t=>{if(new URL(t.request.url).pathname.startsWith(`/api/`)){t.respondWith(fetch(t.request).then(n=>{if(i(t.request,n)){let r=n.clone();self.caches.open(e).then(async e=>e.put(t.request,r))}return n}).catch(async()=>self.caches.open(e).then(async e=>e.match(t.request)).then(e=>e??new Response(`Offline`,{status:503}))));return}t.respondWith(self.caches.open(e).then(async e=>e.match(t.request)).then(async n=>n||fetch(t.request).then(n=>{if(i(t.request,n)){let r=n.clone();self.caches.open(e).then(async e=>e.put(t.request,r))}return n})))}),self.addEventListener(`push`,e=>{let t=`Agent Comms`,n=`New message`;if(e.data)try{let r=e.data.json();typeof r.title==`string`&&(t=r.title),typeof r.body==`string`&&(n=r.body)}catch{let t=e.data.text();t&&(n=t)}e.waitUntil(self.registration.showNotification(t,{body:n,data:{url:self.location.origin}}))}),self.addEventListener(`notificationclick`,e=>{e.notification.close();let t=e.notification.data,n=typeof t==`object`&&t&&`url`in t&&typeof t.url==`string`?t.url:self.location.origin;e.waitUntil(self.clients.matchAll({type:`window`,includeUncontrolled:!0}).then(async e=>{for(let t of e)if(t.url===n&&`focus`in t)return t.focus();return self.clients.openWindow(n)}))});

package/dist/bridges/user/web/frontend/components/App.d.ts

@@ -1,8 +1,7 @@
 /**
- * App — root Preact component.
+ * App — root React component.
  *
- * Renders sidebar + chat area. Receives state and action callbacks
- * from the imperative shell in main.tsx.
+ * Renders sidebar + chat area inside an AppShell. Receives state and action callbacks from the imperative shell in main.tsx.
  */
 import type { Agent, DisplayMessage, Room } from "../types.js";
 export interface AppProps {
@@ -21,5 +20,5 @@ export interface AppProps {
     onJoinRoomInput: (roomName: string) => void;
     onConnectToMesh: () => void;
 }
-export declare function App(props: AppProps): import("preact").JSX.Element;
+export declare function App(props: AppProps): import("react").JSX.Element;
 //# sourceMappingURL=App.d.ts.map

package/dist/bridges/user/web/frontend/components/App.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../../../../../../src/bridges/user/web/frontend/components/App.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAI/D,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;IACvB,MAAM,EAAE,SAAS,KAAK,EAAE,CAAC;IACzB,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,QAAQ,EAAE,SAAS,cAAc,EAAE,CAAC;IACpC,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,YAAY,EAAE,CACZ,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,EACrC,WAAW,EAAE,MAAM,KAChB,IAAI,CAAC;IACV,eAAe,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED,wBAAgB,GAAG,CAAC,KAAK,EAAE,QAAQ,gCAqClC"}
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../../../../../../src/bridges/user/web/frontend/components/App.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,KAAK,EAAE,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAI/D,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;IACvB,MAAM,EAAE,SAAS,KAAK,EAAE,CAAC;IACzB,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,QAAQ,EAAE,SAAS,cAAc,EAAE,CAAC;IACpC,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,YAAY,EAAE,CACZ,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,EACrC,WAAW,EAAE,MAAM,KAChB,IAAI,CAAC;IACV,eAAe,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED,wBAAgB,GAAG,CAAC,KAAK,EAAE,QAAQ,+BAuClC"}

package/dist/bridges/user/web/frontend/components/App.js

@@ -1,17 +1,19 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "preact/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * App — root Preact component.
+ * App — root React component.
  *
- * Renders sidebar + chat area. Receives state and action callbacks
- * from the imperative shell in main.tsx.
+ * Renders sidebar + chat area inside an AppShell. Receives state and action callbacks from the imperative shell in main.tsx.
  */
-import { useState } from "preact/hooks";
+import { AppShell } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
 import { ChatArea } from "./ChatArea.js";
 import { Sidebar } from "./Sidebar.js";
 export function App(props) {
-    const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx("button", { id: "sidebar-toggle", class: "sidebar-toggle-btn", title: sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar", onClick: () => {
-                    setSidebarCollapsed((v) => !v);
-                }, children: sidebarCollapsed ? "☰" : "✕" }), _jsx(Sidebar, { rooms: props.rooms, agents: props.agents, currentRoom: props.currentRoom, collapsed: sidebarCollapsed, onJoinRoom: props.onJoinRoom, onSelectAgent: props.onSelectAgent, onRenameAgent: props.onRenameAgent, onCreateRoom: props.onCreateRoom, onJoinRoomInput: props.onJoinRoomInput }), _jsx(ChatArea, { messages: props.messages, currentRoom: props.currentRoom, dmTarget: props.dmTarget, connected: props.connected, onSendAction: props.onSendAction, onLeaveRoom: props.onLeaveRoom, onConnectToMesh: props.onConnectToMesh })] }));
+    const [navOpened, { toggle: toggleNav }] = useDisclosure(true);
+    return (_jsxs(AppShell, { navbar: {
+            width: 260,
+            breakpoint: "sm",
+            collapsed: { desktop: !navOpened, mobile: !navOpened },
+        }, children: [_jsx(AppShell.Navbar, { children: _jsx(Sidebar, { rooms: props.rooms, agents: props.agents, currentRoom: props.currentRoom, onJoinRoom: props.onJoinRoom, onSelectAgent: props.onSelectAgent, onRenameAgent: props.onRenameAgent, onCreateRoom: props.onCreateRoom, onJoinRoomInput: props.onJoinRoomInput }) }), _jsx(AppShell.Main, { h: "100vh", children: _jsx(ChatArea, { messages: props.messages, rooms: props.rooms, currentRoom: props.currentRoom, dmTarget: props.dmTarget, connected: props.connected, sidebarOpened: navOpened, onToggleSidebar: toggleNav, onSendAction: props.onSendAction, onLeaveRoom: props.onLeaveRoom, onConnectToMesh: props.onConnectToMesh }) })] }));
 }
 //# sourceMappingURL=App.js.map

package/dist/bridges/user/web/frontend/components/App.js.map

@@ -1 +1 @@
-{"version":3,"file":"App.js","sourceRoot":"","sources":["../../../../../../src/bridges/user/web/frontend/components/App.tsx"],"names":[],"mappings":";AAAA;;;;;GAKG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAuBvC,MAAM,UAAU,GAAG,CAAC,KAAe;IACjC,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhE,OAAO,CACL,8BACE,iBACE,EAAE,EAAC,gBAAgB,EACnB,KAAK,EAAC,oBAAoB,EAC1B,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,kBAAkB,EAC/D,OAAO,EAAE,GAAG,EAAE;oBACZ,mBAAmB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;gBACjC,CAAC,YAEA,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GACtB,EACT,KAAC,OAAO,IACN,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,SAAS,EAAE,gBAAgB,EAC3B,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,aAAa,EAAE,KAAK,CAAC,aAAa,EAClC,aAAa,EAAE,KAAK,CAAC,aAAa,EAClC,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,eAAe,EAAE,KAAK,CAAC,eAAe,GACtC,EACF,KAAC,QAAQ,IACP,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,eAAe,EAAE,KAAK,CAAC,eAAe,GACtC,IACD,CACJ,CAAC;AACJ,CAAC"}
+{"version":3,"file":"App.js","sourceRoot":"","sources":["../../../../../../src/bridges/user/web/frontend/components/App.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAuBvC,MAAM,UAAU,GAAG,CAAC,KAAe;IACjC,MAAM,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAE/D,OAAO,CACL,MAAC,QAAQ,IACP,MAAM,EAAE;YACN,KAAK,EAAE,GAAG;YACV,UAAU,EAAE,IAAI;YAChB,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,CAAC,SAAS,EAAE;SACvD,aAED,KAAC,QAAQ,CAAC,MAAM,cACd,KAAC,OAAO,IACN,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,aAAa,EAAE,KAAK,CAAC,aAAa,EAClC,aAAa,EAAE,KAAK,CAAC,aAAa,EAClC,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,eAAe,EAAE,KAAK,CAAC,eAAe,GACtC,GACc,EAClB,KAAC,QAAQ,CAAC,IAAI,IAAC,CAAC,EAAC,OAAO,YACtB,KAAC,QAAQ,IACP,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,aAAa,EAAE,SAAS,EACxB,eAAe,EAAE,SAAS,EAC1B,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,eAAe,EAAE,KAAK,CAAC,eAAe,GACtC,GACY,IACP,CACZ,CAAC;AACJ,CAAC"}

package/dist/bridges/user/web/frontend/components/ChatArea.d.ts

@@ -1,16 +1,19 @@
 /**
  * ChatArea — main chat panel with header, messages, and input.
  */
-import type { DisplayMessage } from "../types.js";
+import type { DisplayMessage, Room } from "../types.js";
 interface ChatAreaProps {
     messages: readonly DisplayMessage[];
+    rooms: readonly Room[];
     currentRoom: string | undefined;
     dmTarget: string | undefined;
     connected: boolean;
+    sidebarOpened: boolean;
+    onToggleSidebar: () => void;
     onSendAction: (text: string) => void;
     onLeaveRoom: () => void;
     onConnectToMesh: () => void;
 }
-export declare function ChatArea({ messages, currentRoom, dmTarget, connected, onSendAction, onLeaveRoom, onConnectToMesh, }: ChatAreaProps): import("preact").JSX.Element;
+export declare function ChatArea({ messages, rooms, currentRoom, dmTarget, connected, sidebarOpened, onToggleSidebar, onSendAction, onLeaveRoom, onConnectToMesh, }: ChatAreaProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=ChatArea.d.ts.map

package/dist/bridges/user/web/frontend/components/ChatArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatArea.d.ts","sourceRoot":"","sources":["../../../../../../src/bridges/user/web/frontend/components/ChatArea.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAKlD,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,cAAc,EAAE,CAAC;IACpC,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,WAAW,EACX,eAAe,GAChB,EAAE,aAAa,gCAkEf"}
+{"version":3,"file":"ChatArea.d.ts","sourceRoot":"","sources":["../../../../../../src/bridges/user/web/frontend/components/ChatArea.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAIH,OAAO,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAIxD,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,cAAc,EAAE,CAAC;IACpC,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;IACvB,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,OAAO,CAAC;IACvB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,KAAK,EACL,WAAW,EACX,QAAQ,EACR,SAAS,EACT,aAAa,EACb,eAAe,EACf,YAAY,EACZ,WAAW,EACX,eAAe,GAChB,EAAE,aAAa,+BAsFf"}

package/dist/bridges/user/web/frontend/components/ChatArea.js

@@ -1,14 +1,18 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * ChatArea — main chat panel with header, messages, and input.
  */
-import { useState } from "preact/hooks";
-import { inputFromEvent } from "../dom.js";
+import { Burger, Button, Group, Stack, Text, TextInput } from "@mantine/core";
+import { useState } from "react";
 import { parseInput } from "../input.js";
 import { MessageList } from "./MessageList.js";
-export function ChatArea({ messages, currentRoom, dmTarget, connected, onSendAction, onLeaveRoom, onConnectToMesh, }) {
+export function ChatArea({ messages, rooms, currentRoom, dmTarget, connected, sidebarOpened, onToggleSidebar, onSendAction, onLeaveRoom, onConnectToMesh, }) {
     const [inputText, setInputText] = useState("");
-    const headerText = currentRoom ??
+    // currentRoom is the room's real owner-qualified id (`<owner-hex>/<local-name>`), not something meant for display -- resolve it back to the plain name the room was created with, the same name the sidebar list already shows, rather than surfacing the internal id verbatim.
+    const currentRoomName = currentRoom === undefined
+        ? undefined
+        : (rooms.find((room) => room.id === currentRoom)?.name ?? currentRoom);
+    const headerText = currentRoomName ??
         (dmTarget !== undefined ? `DM with ${dmTarget}` : "Select a room");
     const handleSend = () => {
         const trimmed = inputText.trim();
@@ -32,8 +36,8 @@ export function ChatArea({ messages, currentRoom, dmTarget, connected, onSendAct
         if (e.key === "Enter")
             handleSend();
     };
-    return (_jsxs("div", { id: "main", children: [_jsxs("div", { id: "header", children: [headerText, currentRoom !== undefined && (_jsx("button", { class: "leave-btn", onClick: onLeaveRoom, children: "Leave" }))] }), _jsx(MessageList, { messages: messages }), !connected && messages.length === 0 && (_jsxs("div", { class: "connect-prompt", children: [_jsx("p", { children: "Connect to a local mesh to discover agents and rooms." }), _jsx("button", { class: "connect-btn", onClick: onConnectToMesh, children: "Connect to local mesh" })] })), _jsxs("div", { id: "input-bar", children: [_jsx("input", { id: "input", type: "text", placeholder: "Type a message or /command...", autocomplete: "off", value: inputText, onInput: (e) => {
-                            setInputText(inputFromEvent(e).value);
-                        }, onKeyDown: handleKeyDown }), _jsx("button", { id: "send-btn", onClick: handleSend, children: "Send" })] })] }));
+    return (_jsxs(Stack, { h: "100%", gap: 0, children: [_jsxs(Group, { component: "header", justify: "space-between", px: "md", py: "sm", bg: "dark.6", children: [_jsxs(Group, { gap: "sm", children: [_jsx(Burger, { opened: sidebarOpened, onClick: onToggleSidebar, size: "sm", "aria-label": "Toggle sidebar" }), _jsx(Text, { fw: 600, children: headerText })] }), currentRoom !== undefined && (_jsx(Button, { size: "xs", variant: "subtle", onClick: onLeaveRoom, children: "Leave" }))] }), _jsx(MessageList, { messages: messages }), !connected && messages.length === 0 && (_jsxs(Stack, { align: "center", justify: "center", gap: "md", p: "xl", children: [_jsx(Text, { c: "dimmed", children: "Connect to a local mesh to discover agents and rooms." }), _jsx(Button, { variant: "outline", onClick: onConnectToMesh, children: "Connect to local mesh" })] })), _jsxs(Group, { px: "md", py: "sm", gap: "xs", bg: "dark.6", children: [_jsx(TextInput, { flex: 1, placeholder: "Type a message or /command...", "aria-label": "Message", autoComplete: "off", value: inputText, onChange: (e) => {
+                            setInputText(e.target.value);
+                        }, onKeyDown: handleKeyDown }), _jsx(Button, { onClick: handleSend, children: "Send" })] })] }));
 }
 //# sourceMappingURL=ChatArea.js.map

package/dist/bridges/user/web/frontend/components/ChatArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatArea.js","sourceRoot":"","sources":["../../../../../../src/bridges/user/web/frontend/components/ChatArea.tsx"],"names":[],"mappings":";AAAA;;GAEG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAY/C,MAAM,UAAU,QAAQ,CAAC,EACvB,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,WAAW,EACX,eAAe,GACD;IACd,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAE/C,MAAM,UAAU,GACd,WAAW;QACX,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,WAAW,QAAQ,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC;IAErE,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,MAAM,OAAO,GAAG,SAAS,CAAC,IAAI,EAAE,CAAC;QACjC,IAAI,CAAC,OAAO;YAAE,OAAO;QACrB,MAAM,MAAM,GAAG,UAAU,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC;QAC1D,QAAQ,MAAM,CAAC,IAAI,EAAE,CAAC;YACpB,KAAK,QAAQ;gBACX,YAAY,CAAC,OAAO,CAAC,CAAC;gBACtB,MAAM;YACR,KAAK,OAAO;gBACV,wDAAwD;gBACxD,YAAY,CAAC,OAAO,CAAC,CAAC;gBACtB,MAAM;YACR,KAAK,SAAS;gBACZ,MAAM;QACV,CAAC;QACD,YAAY,CAAC,EAAE,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,CAAgB,EAAE,EAAE;QACzC,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO;YAAE,UAAU,EAAE,CAAC;IACtC,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,EAAE,EAAC,MAAM,aACZ,eAAK,EAAE,EAAC,QAAQ,aACb,UAAU,EACV,WAAW,KAAK,SAAS,IAAI,CAC5B,iBAAQ,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,WAAW,sBAErC,CACV,IACG,EACN,KAAC,WAAW,IAAC,QAAQ,EAAE,QAAQ,GAAI,EAClC,CAAC,SAAS,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,IAAI,CACtC,eAAK,KAAK,EAAC,gBAAgB,aACzB,gFAA4D,EAC5D,iBAAQ,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,eAAe,sCAE3C,IACL,CACP,EACD,eAAK,EAAE,EAAC,WAAW,aACjB,gBACE,EAAE,EAAC,OAAO,EACV,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,+BAA+B,EAC3C,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;4BACb,YAAY,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;wBACxC,CAAC,EACD,SAAS,EAAE,aAAa,GACxB,EACF,iBAAQ,EAAE,EAAC,UAAU,EAAC,OAAO,EAAE,UAAU,qBAEhC,IACL,IACF,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"ChatArea.js","sourceRoot":"","sources":["../../../../../../src/bridges/user/web/frontend/components/ChatArea.tsx"],"names":[],"mappings":"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"}

package/dist/bridges/user/web/frontend/components/CreateRoomForm.d.ts

@@ -6,6 +6,6 @@ interface CreateRoomFormProps {
     onSubmit: (name: string, type: "public" | "private" | "secret", description: string) => void;
     onCancel: () => void;
 }
-export declare function CreateRoomForm({ visible, onSubmit, onCancel, }: CreateRoomFormProps): import("preact").JSX.Element | null;
+export declare function CreateRoomForm({ visible, onSubmit, onCancel, }: CreateRoomFormProps): import("react").JSX.Element | null;
 export {};
 //# sourceMappingURL=CreateRoomForm.d.ts.map

package/dist/bridges/user/web/frontend/components/CreateRoomForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CreateRoomForm.d.ts","sourceRoot":"","sources":["../../../../../../src/bridges/user/web/frontend/components/CreateRoomForm.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAKH,UAAU,mBAAmB;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CACR,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,EACrC,WAAW,EAAE,MAAM,KAChB,IAAI,CAAC;IACV,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,QAAQ,EACR,QAAQ,GACT,EAAE,mBAAmB,uCA0ErB"}
+{"version":3,"file":"CreateRoomForm.d.ts","sourceRoot":"","sources":["../../../../../../src/bridges/user/web/frontend/components/CreateRoomForm.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAKH,UAAU,mBAAmB;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CACR,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,EACrC,WAAW,EAAE,MAAM,KAChB,IAAI,CAAC;IACV,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAcD,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,QAAQ,EACR,QAAQ,GACT,EAAE,mBAAmB,sCAsErB"}

package/dist/bridges/user/web/frontend/components/CreateRoomForm.js

@@ -1,9 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * CreateRoomForm — inline form for creating a new room.
  */
-import { useState } from "preact/hooks";
-import { inputFromEvent } from "../dom.js";
+import { Button, Group, Select, Stack, TextInput } from "@mantine/core";
+import { useState } from "react";
+const ROOM_TYPE_OPTIONS = [
+    { value: "public", label: "Public" },
+    { value: "private", label: "Private" },
+    { value: "secret", label: "Secret" },
+];
+function isRoomType(value) {
+    return value === "public" || value === "private" || value === "secret";
+}
 export function CreateRoomForm({ visible, onSubmit, onCancel, }) {
     const [name, setName] = useState("");
     const [roomType, setRoomType] = useState("public");
@@ -19,15 +27,13 @@ export function CreateRoomForm({ visible, onSubmit, onCancel, }) {
         setRoomType("public");
         setDescription("");
     };
-    return (_jsx("div", { id: "create-room-form", class: "visible", children: _jsxs("form", { class: "create-room-form", onSubmit: handleSubmit, children: [_jsxs("label", { children: ["Room name", _jsx("input", { type: "text", name: "room-name", required: true, placeholder: "e.g. project-alpha", value: name, onInput: (e) => {
-                                setName(inputFromEvent(e).value);
-                            } })] }), _jsxs("label", { children: ["Type", _jsxs("select", { name: "room-type", value: roomType, onChange: (e) => {
-                                const val = inputFromEvent(e).value;
-                                if (val === "public" || val === "private" || val === "secret") {
-                                    setRoomType(val);
-                                }
-                            }, children: [_jsx("option", { value: "public", children: "Public" }), _jsx("option", { value: "private", children: "Private" }), _jsx("option", { value: "secret", children: "Secret" })] })] }), _jsxs("label", { children: ["Description (optional)", _jsx("input", { type: "text", name: "room-description", placeholder: "What is this room about?", value: description, onInput: (e) => {
-                                setDescription(inputFromEvent(e).value);
-                            } })] }), _jsxs("div", { class: "create-room-btns", children: [_jsx("button", { type: "submit", class: "create-room-submit", children: "Create" }), _jsx("button", { type: "button", class: "create-room-cancel", onClick: onCancel, children: "Cancel" })] })] }) }));
+    return (_jsx("form", { onSubmit: handleSubmit, children: _jsxs(Stack, { gap: "xs", p: "xs", children: [_jsx(TextInput, { label: "Room name", name: "room-name", required: true, placeholder: "e.g. project-alpha", size: "xs", value: name, onChange: (e) => {
+                        setName(e.target.value);
+                    } }), _jsx(Select, { label: "Type", name: "room-type", size: "xs", data: ROOM_TYPE_OPTIONS, value: roomType, allowDeselect: false, onChange: (value) => {
+                        if (isRoomType(value))
+                            setRoomType(value);
+                    } }), _jsx(TextInput, { label: "Description (optional)", name: "room-description", placeholder: "What is this room about?", size: "xs", value: description, onChange: (e) => {
+                        setDescription(e.target.value);
+                    } }), _jsxs(Group, { gap: "xs", children: [_jsx(Button, { type: "submit", size: "xs", flex: 1, children: "Create" }), _jsx(Button, { type: "button", size: "xs", flex: 1, variant: "default", onClick: onCancel, children: "Cancel" })] })] }) }));
 }
 //# sourceMappingURL=CreateRoomForm.js.map

package/dist/bridges/user/web/frontend/components/CreateRoomForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CreateRoomForm.js","sourceRoot":"","sources":["../../../../../../src/bridges/user/web/frontend/components/CreateRoomForm.tsx"],"names":[],"mappings":";AAAA;;GAEG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAY3C,MAAM,UAAU,cAAc,CAAC,EAC7B,OAAO,EACP,QAAQ,EACR,QAAQ,GACY;IACpB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACrC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CACtC,QAAQ,CACT,CAAC;IACF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEnD,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAE1B,MAAM,YAAY,GAAG,CAAC,CAAQ,EAAE,EAAE;QAChC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YAAE,OAAO;QACzB,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC;QACpD,OAAO,CAAC,EAAE,CAAC,CAAC;QACZ,WAAW,CAAC,QAAQ,CAAC,CAAC;QACtB,cAAc,CAAC,EAAE,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,OAAO,CACL,cAAK,EAAE,EAAC,kBAAkB,EAAC,KAAK,EAAC,SAAS,YACxC,gBAAM,KAAK,EAAC,kBAAkB,EAAC,QAAQ,EAAE,YAAY,aACnD,yCAEE,gBACE,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,WAAW,EAChB,QAAQ,QACR,WAAW,EAAC,oBAAoB,EAChC,KAAK,EAAE,IAAI,EACX,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gCACb,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;4BACnC,CAAC,GACD,IACI,EACR,oCAEE,kBACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;gCACd,MAAM,GAAG,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;gCACpC,IAAI,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,SAAS,IAAI,GAAG,KAAK,QAAQ,EAAE,CAAC;oCAC9D,WAAW,CAAC,GAAG,CAAC,CAAC;gCACnB,CAAC;4BACH,CAAC,aAED,iBAAQ,KAAK,EAAC,QAAQ,uBAAgB,EACtC,iBAAQ,KAAK,EAAC,SAAS,wBAAiB,EACxC,iBAAQ,KAAK,EAAC,QAAQ,uBAAgB,IAC/B,IACH,EACR,sDAEE,gBACE,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,kBAAkB,EACvB,WAAW,EAAC,0BAA0B,EACtC,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gCACb,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;4BAC1C,CAAC,GACD,IACI,EACR,eAAK,KAAK,EAAC,kBAAkB,aAC3B,iBAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,oBAAoB,uBAEvC,EACT,iBAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAE,QAAQ,uBAEzD,IACL,IACD,GACH,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"CreateRoomForm.js","sourceRoot":"","sources":["../../../../../../src/bridges/user/web/frontend/components/CreateRoomForm.tsx"],"names":[],"mappings":";AAAA;;GAEG;AAEH,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAYjC,MAAM,iBAAiB,GAAG;IACxB,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;IACpC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;IACtC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;CACrC,CAAC;AAEF,SAAS,UAAU,CACjB,KAAoB;IAEpB,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,QAAQ,CAAC;AACzE,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,EAC7B,OAAO,EACP,QAAQ,EACR,QAAQ,GACY;IACpB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACrC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CACtC,QAAQ,CACT,CAAC;IACF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEnD,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAE1B,MAAM,YAAY,GAAG,CAAC,CAAqC,EAAE,EAAE;QAC7D,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YAAE,OAAO;QACzB,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC;QACpD,OAAO,CAAC,EAAE,CAAC,CAAC;QACZ,WAAW,CAAC,QAAQ,CAAC,CAAC;QACtB,cAAc,CAAC,EAAE,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,OAAO,CACL,eAAM,QAAQ,EAAE,YAAY,YAC1B,MAAC,KAAK,IAAC,GAAG,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,aACpB,KAAC,SAAS,IACR,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,WAAW,EAChB,QAAQ,QACR,WAAW,EAAC,oBAAoB,EAChC,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;wBACd,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;oBAC1B,CAAC,GACD,EACF,KAAC,MAAM,IACL,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,WAAW,EAChB,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,iBAAiB,EACvB,KAAK,EAAE,QAAQ,EACf,aAAa,EAAE,KAAK,EACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;wBAClB,IAAI,UAAU,CAAC,KAAK,CAAC;4BAAE,WAAW,CAAC,KAAK,CAAC,CAAC;oBAC5C,CAAC,GACD,EACF,KAAC,SAAS,IACR,KAAK,EAAC,wBAAwB,EAC9B,IAAI,EAAC,kBAAkB,EACvB,WAAW,EAAC,0BAA0B,EACtC,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;wBACd,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;oBACjC,CAAC,GACD,EACF,MAAC,KAAK,IAAC,GAAG,EAAC,IAAI,aACb,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,CAAC,uBAE9B,EACT,KAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,CAAC,EACP,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,QAAQ,uBAGV,IACH,IACF,GACH,CACR,CAAC;AACJ,CAAC"}

package/dist/bridges/user/web/frontend/components/JoinForm.d.ts

@@ -6,6 +6,6 @@ interface JoinFormProps {
     onSubmit: (roomName: string) => void;
     onCancel: () => void;
 }
-export declare function JoinForm({ visible, onSubmit, onCancel }: JoinFormProps): import("preact").JSX.Element;
+export declare function JoinForm({ visible, onSubmit, onCancel }: JoinFormProps): import("react").JSX.Element | null;
 export {};
 //# sourceMappingURL=JoinForm.d.ts.map

package/dist/bridges/user/web/frontend/components/JoinForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JoinForm.d.ts","sourceRoot":"","sources":["../../../../../../src/bridges/user/web/frontend/components/JoinForm.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAKH,UAAU,aAAa;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,aAAa,gCAoCtE"}
+{"version":3,"file":"JoinForm.d.ts","sourceRoot":"","sources":["../../../../../../src/bridges/user/web/frontend/components/JoinForm.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAKH,UAAU,aAAa;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,aAAa,sCAqCtE"}

package/dist/bridges/user/web/frontend/components/JoinForm.js

@@ -1,13 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * JoinForm — inline form for joining a room by name.
  */
-import { useState } from "preact/hooks";
-import { inputFromEvent } from "../dom.js";
+import { Button, Group, TextInput } from "@mantine/core";
+import { useState } from "react";
 export function JoinForm({ visible, onSubmit, onCancel }) {
     const [roomName, setRoomName] = useState("");
     if (!visible)
-        return _jsx("div", { id: "join-form", class: "join-form hidden" });
+        return null;
     const handleSubmit = () => {
         const trimmed = roomName.trim();
         if (trimmed) {
@@ -21,8 +21,8 @@ export function JoinForm({ visible, onSubmit, onCancel }) {
         if (e.key === "Escape")
             onCancel();
     };
-    return (_jsxs("div", { id: "join-form", class: "join-form", children: [_jsx("input", { class: "join-input", type: "text", placeholder: "Room name...", autocomplete: "off", value: roomName, onInput: (e) => {
-                    setRoomName(inputFromEvent(e).value);
-                }, onKeyDown: handleKeyDown }), _jsx("button", { class: "join-submit", onClick: handleSubmit, children: "Join" })] }));
+    return (_jsxs(Group, { gap: "xs", py: 4, children: [_jsx(TextInput, { flex: 1, size: "xs", placeholder: "Room name...", "aria-label": "Room name", autoComplete: "off", value: roomName, onChange: (e) => {
+                    setRoomName(e.target.value);
+                }, onKeyDown: handleKeyDown }), _jsx(Button, { size: "xs", onClick: handleSubmit, children: "Join" })] }));
 }
 //# sourceMappingURL=JoinForm.js.map

package/dist/bridges/user/web/frontend/components/JoinForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"JoinForm.js","sourceRoot":"","sources":["../../../../../../src/bridges/user/web/frontend/components/JoinForm.tsx"],"names":[],"mappings":";AAAA;;GAEG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAQ3C,MAAM,UAAU,QAAQ,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAiB;IACrE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAE7C,IAAI,CAAC,OAAO;QAAE,OAAO,cAAK,EAAE,EAAC,WAAW,EAAC,KAAK,EAAC,kBAAkB,GAAG,CAAC;IAErE,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,EAAE,CAAC;QAChC,IAAI,OAAO,EAAE,CAAC;YACZ,QAAQ,CAAC,OAAO,CAAC,CAAC;YAClB,WAAW,CAAC,EAAE,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,CAAgB,EAAE,EAAE;QACzC,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO;YAAE,YAAY,EAAE,CAAC;QACtC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;YAAE,QAAQ,EAAE,CAAC;IACrC,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,EAAE,EAAC,WAAW,EAAC,KAAK,EAAC,WAAW,aACnC,gBACE,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,cAAc,EAC1B,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,QAAQ,EACf,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,WAAW,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;gBACvC,CAAC,EACD,SAAS,EAAE,aAAa,GACxB,EACF,iBAAQ,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,YAAY,qBAExC,IACL,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"JoinForm.js","sourceRoot":"","sources":["../../../../../../src/bridges/user/web/frontend/components/JoinForm.tsx"],"names":[],"mappings":";AAAA;;GAEG;AAEH,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAQjC,MAAM,UAAU,QAAQ,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAiB;IACrE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAE7C,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAE1B,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,EAAE,CAAC;QAChC,IAAI,OAAO,EAAE,CAAC;YACZ,QAAQ,CAAC,OAAO,CAAC,CAAC;YAClB,WAAW,CAAC,EAAE,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,CAAwC,EAAE,EAAE;QACjE,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO;YAAE,YAAY,EAAE,CAAC;QACtC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;YAAE,QAAQ,EAAE,CAAC;IACrC,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,KAAK,IAAC,GAAG,EAAC,IAAI,EAAC,EAAE,EAAE,CAAC,aACnB,KAAC,SAAS,IACR,IAAI,EAAE,CAAC,EACP,IAAI,EAAC,IAAI,EACT,WAAW,EAAC,cAAc,gBACf,WAAW,EACtB,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;oBACd,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBAC9B,CAAC,EACD,SAAS,EAAE,aAAa,GACxB,EACF,KAAC,MAAM,IAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,YAAY,qBAE9B,IACH,CACT,CAAC;AACJ,CAAC"}

package/dist/bridges/user/web/frontend/components/Message.d.ts

@@ -4,5 +4,5 @@
 import type { DisplayMessage } from "../types.js";
 export declare function Message({ message }: {
     message: DisplayMessage;
-}): import("preact").JSX.Element;
+}): import("react").JSX.Element;
 //# sourceMappingURL=Message.d.ts.map

package/dist/bridges/user/web/frontend/components/Message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../../../../src/bridges/user/web/frontend/components/Message.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlD,wBAAgB,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,cAAc,CAAA;CAAE,gCAwB/D"}
+{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../../../../src/bridges/user/web/frontend/components/Message.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlD,wBAAgB,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,cAAc,CAAA;CAAE,+BA0C/D"}

package/dist/bridges/user/web/frontend/components/Message.js

@@ -1,15 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-import { formatTime } from "../dom.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Message — renders a single display message.
+ */
+import { Badge, Group, Text } from "@mantine/core";
+import { formatTime } from "../messages.js";
 export function Message({ message }) {
     switch (message.type) {
         case "chat":
-            return (_jsxs("div", { class: "msg", children: [_jsx("span", { class: "sender", children: message.sender }), _jsx("span", { class: "time", children: formatTime(message.timestamp) }), ":", " ", message.content] }));
+            return (_jsxs(Group, { gap: "xs", wrap: "wrap", align: "baseline", children: [_jsx(Text, { fw: 600, c: "accent", span: true, children: message.sender }), _jsx(Text, { c: "dimmed", size: "xs", span: true, children: formatTime(message.timestamp) }), _jsxs(Text, { span: true, children: [": ", message.content] })] }));
         case "dm":
-            return (_jsxs("div", { class: "msg dm", children: [_jsx("span", { class: "dm-badge", children: "DM" }), " ", _jsx("span", { class: "sender", children: message.sender }), _jsx("span", { class: "time", children: formatTime(message.timestamp) }), ":", " ", message.content] }));
+            return (_jsxs(Group, { gap: "xs", wrap: "wrap", align: "baseline", children: [_jsx(Badge, { color: "grape", size: "xs", children: "DM" }), _jsx(Text, { fw: 600, c: "accent", span: true, children: message.sender }), _jsx(Text, { c: "dimmed", size: "xs", span: true, children: formatTime(message.timestamp) }), _jsxs(Text, { span: true, children: [": ", message.content] })] }));
         case "system":
-            return _jsx("div", { class: "msg system", children: message.text });
+            return (_jsx(Text, { c: "dimmed", fs: "italic", size: "sm", children: message.text }));
         case "status":
-            return _jsx("div", { class: "msg status", children: message.text });
+            return (_jsx(Text, { c: "yellow", size: "xs", children: message.text }));
     }
 }
 //# sourceMappingURL=Message.js.map

package/dist/bridges/user/web/frontend/components/Message.js.map

@@ -1 +1 @@
-{"version":3,"file":"Message.js","sourceRoot":"","sources":["../../../../../../src/bridges/user/web/frontend/components/Message.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAEvC,MAAM,UAAU,OAAO,CAAC,EAAE,OAAO,EAA+B;IAC9D,QAAQ,OAAO,CAAC,IAAI,EAAE,CAAC;QACrB,KAAK,MAAM;YACT,OAAO,CACL,eAAK,KAAK,EAAC,KAAK,aACd,eAAM,KAAK,EAAC,QAAQ,YAAE,OAAO,CAAC,MAAM,GAAQ,EAC5C,eAAM,KAAK,EAAC,MAAM,YAAE,UAAU,CAAC,OAAO,CAAC,SAAS,CAAC,GAAQ,OAAE,GAAG,EAC7D,OAAO,CAAC,OAAO,IACZ,CACP,CAAC;QACJ,KAAK,IAAI;YACP,OAAO,CACL,eAAK,KAAK,EAAC,QAAQ,aACjB,eAAM,KAAK,EAAC,UAAU,mBAAU,EAAC,GAAG,EACpC,eAAM,KAAK,EAAC,QAAQ,YAAE,OAAO,CAAC,MAAM,GAAQ,EAC5C,eAAM,KAAK,EAAC,MAAM,YAAE,UAAU,CAAC,OAAO,CAAC,SAAS,CAAC,GAAQ,OAAE,GAAG,EAC7D,OAAO,CAAC,OAAO,IACZ,CACP,CAAC;QACJ,KAAK,QAAQ;YACX,OAAO,cAAK,KAAK,EAAC,YAAY,YAAE,OAAO,CAAC,IAAI,GAAO,CAAC;QACtD,KAAK,QAAQ;YACX,OAAO,cAAK,KAAK,EAAC,YAAY,YAAE,OAAO,CAAC,IAAI,GAAO,CAAC;IACxD,CAAC;AACH,CAAC"}
+{"version":3,"file":"Message.js","sourceRoot":"","sources":["../../../../../../src/bridges/user/web/frontend/components/Message.tsx"],"names":[],"mappings":";AAAA;;GAEG;AAEH,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,UAAU,OAAO,CAAC,EAAE,OAAO,EAA+B;IAC9D,QAAQ,OAAO,CAAC,IAAI,EAAE,CAAC;QACrB,KAAK,MAAM;YACT,OAAO,CACL,MAAC,KAAK,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,UAAU,aAC1C,KAAC,IAAI,IAAC,EAAE,EAAE,GAAG,EAAE,CAAC,EAAC,QAAQ,EAAC,IAAI,kBAC3B,OAAO,CAAC,MAAM,GACV,EACP,KAAC,IAAI,IAAC,CAAC,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,kBAC5B,UAAU,CAAC,OAAO,CAAC,SAAS,CAAC,GACzB,EACP,MAAC,IAAI,IAAC,IAAI,yBAAI,OAAO,CAAC,OAAO,IAAQ,IAC/B,CACT,CAAC;QACJ,KAAK,IAAI;YACP,OAAO,CACL,MAAC,KAAK,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,UAAU,aAC1C,KAAC,KAAK,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,mBAEtB,EACR,KAAC,IAAI,IAAC,EAAE,EAAE,GAAG,EAAE,CAAC,EAAC,QAAQ,EAAC,IAAI,kBAC3B,OAAO,CAAC,MAAM,GACV,EACP,KAAC,IAAI,IAAC,CAAC,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,kBAC5B,UAAU,CAAC,OAAO,CAAC,SAAS,CAAC,GACzB,EACP,MAAC,IAAI,IAAC,IAAI,yBAAI,OAAO,CAAC,OAAO,IAAQ,IAC/B,CACT,CAAC;QACJ,KAAK,QAAQ;YACX,OAAO,CACL,KAAC,IAAI,IAAC,CAAC,EAAC,QAAQ,EAAC,EAAE,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,YACnC,OAAO,CAAC,IAAI,GACR,CACR,CAAC;QACJ,KAAK,QAAQ;YACX,OAAO,CACL,KAAC,IAAI,IAAC,CAAC,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,YACvB,OAAO,CAAC,IAAI,GACR,CACR,CAAC;IACN,CAAC;AACH,CAAC"}

package/dist/bridges/user/web/frontend/components/MessageList.d.ts

@@ -4,5 +4,5 @@
 import type { DisplayMessage } from "../types.js";
 export declare function MessageList({ messages, }: {
     messages: readonly DisplayMessage[];
-}): import("preact").JSX.Element;
+}): import("react").JSX.Element;
 //# sourceMappingURL=MessageList.d.ts.map

package/dist/bridges/user/web/frontend/components/MessageList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../../../../src/bridges/user/web/frontend/components/MessageList.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlD,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,SAAS,cAAc,EAAE,CAAC;CACrC,gCAgBA"}
+{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../../../../src/bridges/user/web/frontend/components/MessageList.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAIH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlD,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,SAAS,cAAc,EAAE,CAAC;CACrC,+BAwBA"}

package/dist/bridges/user/web/frontend/components/MessageList.js

@@ -1,16 +1,18 @@
-import { jsx as _jsx } from "preact/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * MessageList — scrollable message area with auto-scroll.
  */
-import { useRef, useEffect } from "preact/hooks";
+import { ScrollArea, Stack } from "@mantine/core";
+import { useEffect, useRef } from "react";
 import { Message } from "./Message.js";
 export function MessageList({ messages, }) {
-    const ref = useRef(null);
+    const viewportRef = useRef(null);
     useEffect(() => {
-        if (ref.current) {
-            ref.current.scrollTop = ref.current.scrollHeight;
+        const viewport = viewportRef.current;
+        if (viewport) {
+            viewport.scrollTop = viewport.scrollHeight;
         }
     }, [messages.length]);
-    return (_jsx("div", { id: "messages", ref: ref, children: messages.map((msg, i) => (_jsx(Message, { message: msg }, i))) }));
+    return (_jsx(ScrollArea, { flex: 1, p: "md", viewportRef: viewportRef, "aria-label": "Conversation", children: _jsx(Stack, { gap: 4, children: messages.map((msg, i) => (_jsx(Message, { message: msg }, i))) }) }));
 }
 //# sourceMappingURL=MessageList.js.map

package/dist/bridges/user/web/frontend/components/MessageList.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageList.js","sourceRoot":"","sources":["../../../../../../src/bridges/user/web/frontend/components/MessageList.tsx"],"names":[],"mappings":";AAAA;;GAEG;AAEH,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEjD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,MAAM,UAAU,WAAW,CAAC,EAC1B,QAAQ,GAGT;IACC,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,GAAG,CAAC,OAAO,EAAE,CAAC;YAChB,GAAG,CAAC,OAAO,CAAC,SAAS,GAAG,GAAG,CAAC,OAAO,CAAC,YAAY,CAAC;QACnD,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;IAEtB,OAAO,CACL,cAAK,EAAE,EAAC,UAAU,EAAC,GAAG,EAAE,GAAG,YACxB,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CACxB,KAAC,OAAO,IAAS,OAAO,EAAE,GAAG,IAAf,CAAC,CAAkB,CAClC,CAAC,GACE,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"MessageList.js","sourceRoot":"","sources":["../../../../../../src/bridges/user/web/frontend/components/MessageList.tsx"],"names":[],"mappings":";AAAA;;GAEG;AAEH,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,MAAM,UAAU,WAAW,CAAC,EAC1B,QAAQ,GAGT;IACC,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEjD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,WAAW,CAAC,OAAO,CAAC;QACrC,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,CAAC,SAAS,GAAG,QAAQ,CAAC,YAAY,CAAC;QAC7C,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;IAEtB,OAAO,CACL,KAAC,UAAU,IACT,IAAI,EAAE,CAAC,EACP,CAAC,EAAC,IAAI,EACN,WAAW,EAAE,WAAW,gBACb,cAAc,YAEzB,KAAC,KAAK,IAAC,GAAG,EAAE,CAAC,YACV,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CACxB,KAAC,OAAO,IAAS,OAAO,EAAE,GAAG,IAAf,CAAC,CAAkB,CAClC,CAAC,GACI,GACG,CACd,CAAC;AACJ,CAAC"}

package/dist/bridges/user/web/frontend/components/ProjectTree.d.ts

@@ -1,8 +1,7 @@
 /**
  * ProjectTree — recursive tree view of agents grouped by working directory.
  *
- * Shows directories as expandable/collapsible nodes with agents nested inside.
- * Manual rooms appear in a separate flat list below the tree.
+ * Shows directories as expandable/collapsible nodes with agents nested inside. Manual rooms appear in a separate flat list below the tree.
  */
 import type { ProjectTree as ProjectTreeData } from "../types.js";
 interface ProjectTreeProps {
@@ -12,6 +11,6 @@ interface ProjectTreeProps {
     onRenameAgent: (agentId: string, newName: string) => void;
     currentRoom: string | undefined;
 }
-export declare function ProjectTree({ tree, onJoinRoom, onSelectAgent, onRenameAgent, currentRoom, }: ProjectTreeProps): import("preact").JSX.Element;
+export declare function ProjectTree({ tree, onJoinRoom, onSelectAgent, onRenameAgent, currentRoom, }: ProjectTreeProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=ProjectTree.d.ts.map

package/dist/bridges/user/web/frontend/components/ProjectTree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProjectTree.d.ts","sourceRoot":"","sources":["../../../../../../src/bridges/user/web/frontend/components/ProjectTree.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAGV,WAAW,IAAI,eAAe,EAE/B,MAAM,aAAa,CAAC;AAGrB,UAAU,gBAAgB;IACxB,IAAI,EAAE,eAAe,CAAC;IACtB,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;CACjC;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,UAAU,EACV,aAAa,EACb,aAAa,EACb,WAAW,GACZ,EAAE,gBAAgB,gCA+BlB"}
+{"version":3,"file":"ProjectTree.d.ts","sourceRoot":"","sources":["../../../../../../src/bridges/user/web/frontend/components/ProjectTree.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,KAAK,EAGV,WAAW,IAAI,eAAe,EAE/B,MAAM,aAAa,CAAC;AAErB,UAAU,gBAAgB;IACxB,IAAI,EAAE,eAAe,CAAC;IACtB,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;CACjC;AAsBD,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,UAAU,EACV,aAAa,EACb,aAAa,EACb,WAAW,GACZ,EAAE,gBAAgB,+BAgClB"}

package/dist/bridges/user/web/frontend/components/ProjectTree.js

@@ -1,16 +1,27 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * ProjectTree — recursive tree view of agents grouped by working directory.
  *
- * Shows directories as expandable/collapsible nodes with agents nested inside.
- * Manual rooms appear in a separate flat list below the tree.
+ * Shows directories as expandable/collapsible nodes with agents nested inside. Manual rooms appear in a separate flat list below the tree.
  */
-import { useState } from "preact/hooks";
-import { inputFromEvent } from "../dom.js";
+import { Box, NavLink, Text, TextInput } from "@mantine/core";
+import { useEffect, useRef, useState } from "react";
+const STATUS_DOT_COLORS = {
+    active: "green",
+    idle: "yellow",
+    busy: "red",
+    offline: "gray",
+};
+function StatusDot({ status }) {
+    return (_jsx(Box, { w: 8, h: 8, style: {
+            borderRadius: "50%",
+            backgroundColor: `var(--mantine-color-${STATUS_DOT_COLORS[status]}-6)`,
+        } }));
+}
 export function ProjectTree({ tree, onJoinRoom, onSelectAgent, onRenameAgent, currentRoom, }) {
-    return (_jsxs("div", { id: "room-list", class: "project-tree", children: [tree.roots.map((node) => (_jsx(TreeNodeView, { node: node, onJoinRoom: onJoinRoom, onSelectAgent: onSelectAgent, onRenameAgent: onRenameAgent, currentRoom: currentRoom }))), tree.manualRooms.length > 0 && (_jsxs("div", { class: "tree-section", children: [_jsx("h3", { class: "tree-section-heading", children: "Rooms" }), tree.manualRooms.map((room) => (_jsxs("div", { class: "room-item" + (currentRoom === room.id ? " active" : ""), onClick: () => {
+    return (_jsxs(Box, { mb: "xs", children: [tree.roots.map((node) => (_jsx(TreeNodeView, { node: node, onJoinRoom: onJoinRoom, onSelectAgent: onSelectAgent, onRenameAgent: onRenameAgent, currentRoom: currentRoom }, node.type === "agent" ? node.agentId : node.path))), tree.manualRooms.length > 0 && (_jsxs(Box, { py: 4, children: [_jsx(Text, { size: "xs", c: "dimmed", fw: 700, tt: "uppercase", px: "xs", py: 4, children: "Rooms" }), tree.manualRooms.map((room) => (_jsx(NavLink, { label: `${room.name} (${String(room.members.length)})`, active: currentRoom === room.id, onClick: () => {
                             onJoinRoom(room.id);
-                        }, children: [_jsx("span", { children: room.name }), _jsxs("span", { children: ["(", String(room.members.length), ")"] })] }, room.id)))] }))] }));
+                        } }, room.id)))] }))] }));
 }
 function TreeNodeView({ node, onJoinRoom, onSelectAgent, onRenameAgent, currentRoom, }) {
     if (node.type === "agent") {
@@ -19,20 +30,25 @@ function TreeNodeView({ node, onJoinRoom, onSelectAgent, onRenameAgent, currentR
     return (_jsx(DirectoryView, { node: node, onJoinRoom: onJoinRoom, onSelectAgent: onSelectAgent, onRenameAgent: onRenameAgent, currentRoom: currentRoom }));
 }
 function DirectoryView({ node, onJoinRoom, onSelectAgent, onRenameAgent, currentRoom, }) {
-    const [expanded, setExpanded] = useState(true);
-    const hasRoom = node.roomId !== undefined;
-    const isCurrentRoom = currentRoom === node.roomId;
-    return (_jsxs("div", { class: "tree-directory", children: [_jsxs("div", { class: "tree-directory-name", children: [_jsx("span", { class: "tree-folder-toggle", title: "Expand/collapse", onClick: (e) => {
-                            e.stopPropagation();
-                            setExpanded(!expanded);
-                        }, children: _jsx("span", { class: "tree-folder-icon", children: expanded ? "📂" : "📁" }) }), _jsx("span", { class: `tree-directory-label${isCurrentRoom ? " active" : ""}${hasRoom ? " clickable" : ""}`, onClick: () => {
-                            if (node.roomId !== undefined)
-                                onJoinRoom(node.roomId);
-                        }, children: node.name })] }), expanded && (_jsx("div", { class: "tree-children", children: node.children.map((child) => (_jsx(TreeNodeView, { node: child, onJoinRoom: onJoinRoom, onSelectAgent: onSelectAgent, onRenameAgent: onRenameAgent, currentRoom: currentRoom }, child.type === "agent" ? child.agentId : child.path))) }))] }));
+    const roomId = node.roomId;
+    const isCurrentRoom = currentRoom === roomId;
+    const clickProps = roomId === undefined
+        ? {}
+        : {
+            onClick: () => {
+                onJoinRoom(roomId);
+            },
+        };
+    return (_jsx(NavLink, { label: node.name, leftSection: _jsx("span", { "aria-hidden": "true", children: "\uD83D\uDCC1" }), defaultOpened: true, active: isCurrentRoom, ...clickProps, children: node.children.map((child) => (_jsx(TreeNodeView, { node: child, onJoinRoom: onJoinRoom, onSelectAgent: onSelectAgent, onRenameAgent: onRenameAgent, currentRoom: currentRoom }, child.type === "agent" ? child.agentId : child.path))) }));
 }
 function AgentView({ node, onSelectAgent, onRenameAgent }) {
     const [editing, setEditing] = useState(false);
     const [editName, setEditName] = useState("");
+    const renameInputRef = useRef(null);
+    useEffect(() => {
+        if (editing)
+            renameInputRef.current?.focus();
+    }, [editing]);
     const handleDoubleClick = () => {
         setEditName(node.name);
         setEditing(true);
@@ -51,12 +67,12 @@ function AgentView({ node, onSelectAgent, onRenameAgent }) {
             setEditing(false);
     };
     if (editing) {
-        return (_jsxs("div", { class: "tree-agent agent-item editing", children: [_jsx("span", { class: `status-dot ${node.status}` }), _jsx("input", { class: "agent-rename-input", type: "text", value: editName, autofocus: true, onInput: (e) => {
-                        setEditName(inputFromEvent(e).value);
-                    }, onKeyDown: handleKeyDown, onBlur: handleSubmit })] }));
+        return (_jsx(TextInput, { ref: renameInputRef, size: "xs", ml: "md", "aria-label": `Rename ${node.name}`, value: editName, onChange: (e) => {
+                setEditName(e.target.value);
+            }, onKeyDown: handleKeyDown, onBlur: handleSubmit }));
     }
-    return (_jsxs("div", { class: "tree-agent agent-item", onClick: () => {
+    return (_jsx(NavLink, { label: node.name, leftSection: _jsx(StatusDot, { status: node.status }), onClick: () => {
             onSelectAgent(node.agentId);
-        }, onDblClick: handleDoubleClick, children: [_jsx("span", { class: `status-dot ${node.status}` }), _jsx("span", { children: node.name })] }));
+        }, onDoubleClick: handleDoubleClick }));
 }
 //# sourceMappingURL=ProjectTree.js.map