From 0218a5a002332537aa5c9906e7c0389a9a31c267 Mon Sep 17 00:00:00 2001
From: Ben Cherry <bcherry@gmail.com>
Date: Thu, 29 May 2025 15:26:04 -0700
Subject: [PATCH] Add attributes inspector and explicit dispatch support (#144)

---
 .github/ISSUE_TEMPLATE/config.yml             |   2 +-
 .github/ISSUE_TEMPLATE/feature_request.yaml   |   2 +-
 README.md                                     |   6 +-
 package-lock.json                             | 623 +++++++++---------
 package.json                                  |  42 +-
 postcss.config.js                             |   2 +-
 public/favicon.ico                            | Bin 25931 -> 15406 bytes
 public/next.svg                               |   1 -
 public/vercel.svg                             |   1 -
 src/cloud/README.md                           |   2 +-
 src/cloud/useCloud.tsx                        |   2 +-
 src/components/config/AttributeRow.tsx        |  60 ++
 src/components/config/AttributesEditor.tsx    |  93 ---
 src/components/config/AttributesInspector.tsx | 268 ++++++++
 .../config/ConfigurationPanelItem.tsx         |  66 +-
 src/components/config/NameValueRow.tsx        |   8 +-
 src/components/playground/Playground.tsx      | 340 +++++-----
 src/components/playground/PlaygroundTile.tsx  |   2 +-
 src/components/playground/RpcPanel.tsx        | 107 +++
 .../playground/SettingsDropdown.tsx           |  29 +-
 src/components/toast/PlaygroundToast.tsx      |   4 +-
 src/components/toast/ToasterProvider.tsx      |  19 +-
 src/hooks/useConfig.tsx                       |   9 +-
 src/hooks/useConnection.tsx                   |  40 +-
 src/hooks/useTrackVolume.tsx                  |   4 +-
 src/lib/types.ts                              |   2 +-
 src/pages/api/token.ts                        |  42 +-
 src/pages/index.tsx                           |  18 +-
 src/transcriptions/TranscriptionTile.tsx      |  18 +-
 tailwind.config.js                            |  88 ++-
 30 files changed, 1208 insertions(+), 692 deletions(-)
 delete mode 100644 public/next.svg
 delete mode 100644 public/vercel.svg
 create mode 100644 src/components/config/AttributeRow.tsx
 delete mode 100644 src/components/config/AttributesEditor.tsx
 create mode 100644 src/components/config/AttributesInspector.tsx
 create mode 100644 src/components/playground/RpcPanel.tsx

diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
index bee1970..d85c868 100644
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -2,4 +2,4 @@ blank_issues_enabled: false
 contact_links:
   - name: Slack Community Chat
     url: https://livekit.io/join-slack
-    about: Ask questions and discuss with other LiveKit users in real time.
\ No newline at end of file
+    about: Ask questions and discuss with other LiveKit users in real time.
diff --git a/.github/ISSUE_TEMPLATE/feature_request.yaml b/.github/ISSUE_TEMPLATE/feature_request.yaml
index d2d221c..e542bea 100644
--- a/.github/ISSUE_TEMPLATE/feature_request.yaml
+++ b/.github/ISSUE_TEMPLATE/feature_request.yaml
@@ -41,4 +41,4 @@ body:
     id: additional-context
     attributes:
       label: Additional Information
-      description: Add any other context or screenshots about the feature request here.
\ No newline at end of file
+      description: Add any other context or screenshots about the feature request here.
diff --git a/README.md b/README.md
index 936c0d8..75d08c9 100644
--- a/README.md
+++ b/README.md
@@ -11,8 +11,10 @@
 # LiveKit Agents Playground
 
 <!--BEGIN_DESCRIPTION-->
+
 The Agents Playground is designed for quickly prototyping with server side agents built with [LiveKit Agents Framework](https://github.com/livekit/agents). Easily tap into LiveKit WebRTC sessions and process or generate audio, video, and data streams.
-  The playground includes components to fully interact with any LiveKit agent, through video, audio and chat.
+The playground includes components to fully interact with any LiveKit agent, through video, audio and chat.
+
 <!--END_DESCRIPTION-->
 
 ## Docs and references
@@ -69,7 +71,9 @@ NEXT_PUBLIC_LIVEKIT_URL=wss://<Your Cloud URL>
 - Mobile device sizes not supported currently
 
 <!--BEGIN_REPO_NAV-->
+
 <br/><table>
+
 <thead><tr><th colspan="2">LiveKit Ecosystem</th></tr></thead>
 <tbody>
 <tr><td>LiveKit SDKs</td><td><a href="https://github.com/livekit/client-sdk-js">Browser</a> · <a href="https://github.com/livekit/client-sdk-swift">iOS/macOS/visionOS</a> · <a href="https://github.com/livekit/client-sdk-android">Android</a> · <a href="https://github.com/livekit/client-sdk-flutter">Flutter</a> · <a href="https://github.com/livekit/client-sdk-react-native">React Native</a> · <a href="https://github.com/livekit/rust-sdks">Rust</a> · <a href="https://github.com/livekit/node-sdks">Node.js</a> · <a href="https://github.com/livekit/python-sdks">Python</a> · <a href="https://github.com/livekit/client-sdk-unity">Unity</a> · <a href="https://github.com/livekit/client-sdk-unity-web">Unity (WebGL)</a></td></tr><tr></tr>
diff --git a/package-lock.json b/package-lock.json
index d265978..4e82159 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,32 +9,33 @@
       "version": "0.1.0",
       "dependencies": {
         "@livekit/components-react": "^2.9.3",
-        "@livekit/components-styles": "^1.1.1",
-        "@radix-ui/react-dropdown-menu": "^2.0.6",
-        "cookies-next": "^4.1.1",
-        "framer-motion": "^10.16.16",
+        "@livekit/components-styles": "^1.1.5",
+        "@radix-ui/react-dropdown-menu": "^2.1.2",
+        "cookies-next": "^4.3.0",
+        "framer-motion": "^10.18.0",
         "js-yaml": "^4.1.0",
-        "livekit-client": "^2.5.1",
-        "livekit-server-sdk": "^2.6.1",
+        "livekit-client": "^2.9.5",
+        "livekit-server-sdk": "^2.13.0",
         "lodash": "^4.17.21",
-        "next": "^14.0.4",
+        "next": "^14.2.20",
         "next-plugin-preval": "^1.2.6",
-        "qrcode.react": "^4.0.0",
-        "react": "^18",
-        "react-dom": "^18"
+        "qrcode.react": "^4.1.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1"
       },
       "devDependencies": {
         "@types/js-yaml": "^4.0.9",
-        "@types/lodash": "^4.17.0",
-        "@types/node": "^20.10.4",
-        "@types/react": "^18.2.43",
-        "@types/react-dom": "^18",
-        "autoprefixer": "^10.4.16",
-        "eslint": "^8",
+        "@types/lodash": "^4.17.13",
+        "@types/node": "^20.17.9",
+        "@types/react": "^18.3.14",
+        "@types/react-dom": "^18.3.3",
+        "autoprefixer": "^10.4.20",
+        "eslint": "^8.57.1",
         "eslint-config-next": "14.2.26",
-        "postcss": "^8.4.31",
-        "tailwindcss": "^3.3.5",
-        "typescript": "^5.3.3"
+        "postcss": "^8.4.49",
+        "prettier": "^3.4.2",
+        "tailwindcss": "^3.4.16",
+        "typescript": "^5.7.2"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -1880,9 +1881,10 @@
       }
     },
     "node_modules/@floating-ui/react-dom": {
-      "version": "2.0.9",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.9.tgz",
-      "integrity": "sha512-q0umO0+LQK4+p6aGyvzASqKbKOJcAHJ7ycE9CuUvfx3s9zTHWmGJTPOIlM/hmSBfUfg/XfY5YhLBLR/LHwShQQ==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
+      "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+      "license": "MIT",
       "dependencies": {
         "@floating-ui/dom": "^1.0.0"
       },
@@ -2352,26 +2354,24 @@
       }
     },
     "node_modules/@radix-ui/primitive": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
-      "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      }
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.2.tgz",
+      "integrity": "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==",
+      "license": "MIT"
     },
     "node_modules/@radix-ui/react-arrow": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz",
-      "integrity": "sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==",
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
+      "integrity": "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-primitive": "1.0.3"
+        "@radix-ui/react-primitive": "2.1.3"
       },
       "peerDependencies": {
         "@types/react": "*",
         "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -2383,21 +2383,21 @@
       }
     },
     "node_modules/@radix-ui/react-collection": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
-      "integrity": "sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==",
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
+      "integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-context": "1.0.1",
-        "@radix-ui/react-primitive": "1.0.3",
-        "@radix-ui/react-slot": "1.0.2"
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
       },
       "peerDependencies": {
         "@types/react": "*",
         "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -2409,15 +2409,13 @@
       }
     },
     "node_modules/@radix-ui/react-compose-refs": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
-      "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "license": "MIT",
       "peerDependencies": {
         "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -2426,15 +2424,13 @@
       }
     },
     "node_modules/@radix-ui/react-context": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
-      "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
       "peerDependencies": {
         "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -2443,15 +2439,13 @@
       }
     },
     "node_modules/@radix-ui/react-direction": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.1.tgz",
-      "integrity": "sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
+      "integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
+      "license": "MIT",
       "peerDependencies": {
         "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -2460,22 +2454,22 @@
       }
     },
     "node_modules/@radix-ui/react-dismissable-layer": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz",
-      "integrity": "sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==",
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.10.tgz",
+      "integrity": "sha512-IM1zzRV4W3HtVgftdQiiOmA0AdJlCtMLe00FXaHwgt3rAnNsIyDqshvkIW3hj/iu5hu8ERP7KIYki6NkqDxAwQ==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.1",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-primitive": "1.0.3",
-        "@radix-ui/react-use-callback-ref": "1.0.1",
-        "@radix-ui/react-use-escape-keydown": "1.0.3"
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-escape-keydown": "1.1.1"
       },
       "peerDependencies": {
         "@types/react": "*",
         "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -2487,24 +2481,24 @@
       }
     },
     "node_modules/@radix-ui/react-dropdown-menu": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.0.6.tgz",
-      "integrity": "sha512-i6TuFOoWmLWq+M/eCLGd/bQ2HfAX1RJgvrBQ6AQLmzfvsLdefxbWu8G9zczcPFfcSPehz9GcpF6K9QYreFV8hA==",
+      "version": "2.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.15.tgz",
+      "integrity": "sha512-mIBnOjgwo9AH3FyKaSWoSu/dYj6VdhJ7frEPiGTeXCdUFHjl9h3mFh2wwhEtINOmYXWhdpf1rY2minFsmaNgVQ==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.1",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-context": "1.0.1",
-        "@radix-ui/react-id": "1.0.1",
-        "@radix-ui/react-menu": "2.0.6",
-        "@radix-ui/react-primitive": "1.0.3",
-        "@radix-ui/react-use-controllable-state": "1.0.1"
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-menu": "2.1.15",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
       },
       "peerDependencies": {
         "@types/react": "*",
         "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -2516,15 +2510,13 @@
       }
     },
     "node_modules/@radix-ui/react-focus-guards": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz",
-      "integrity": "sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.2.tgz",
+      "integrity": "sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==",
+      "license": "MIT",
       "peerDependencies": {
         "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -2533,20 +2525,20 @@
       }
     },
     "node_modules/@radix-ui/react-focus-scope": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz",
-      "integrity": "sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==",
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz",
+      "integrity": "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-primitive": "1.0.3",
-        "@radix-ui/react-use-callback-ref": "1.0.1"
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1"
       },
       "peerDependencies": {
         "@types/react": "*",
         "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -2558,16 +2550,16 @@
       }
     },
     "node_modules/@radix-ui/react-id": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
-      "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+      "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-use-layout-effect": "1.0.1"
+        "@radix-ui/react-use-layout-effect": "1.1.1"
       },
       "peerDependencies": {
         "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -2576,35 +2568,35 @@
       }
     },
     "node_modules/@radix-ui/react-menu": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.0.6.tgz",
-      "integrity": "sha512-BVkFLS+bUC8HcImkRKPSiVumA1VPOOEC5WBMiT+QAVsPzW1FJzI9KnqgGxVDPBcql5xXrHkD3JOVoXWEXD8SYA==",
+      "version": "2.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.15.tgz",
+      "integrity": "sha512-tVlmA3Vb9n8SZSd+YSbuFR66l87Wiy4du+YE+0hzKQEANA+7cWKH1WgqcEX4pXqxUFQKrWQGHdvEfw00TjFiew==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.1",
-        "@radix-ui/react-collection": "1.0.3",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-context": "1.0.1",
-        "@radix-ui/react-direction": "1.0.1",
-        "@radix-ui/react-dismissable-layer": "1.0.5",
-        "@radix-ui/react-focus-guards": "1.0.1",
-        "@radix-ui/react-focus-scope": "1.0.4",
-        "@radix-ui/react-id": "1.0.1",
-        "@radix-ui/react-popper": "1.1.3",
-        "@radix-ui/react-portal": "1.0.4",
-        "@radix-ui/react-presence": "1.0.1",
-        "@radix-ui/react-primitive": "1.0.3",
-        "@radix-ui/react-roving-focus": "1.0.4",
-        "@radix-ui/react-slot": "1.0.2",
-        "@radix-ui/react-use-callback-ref": "1.0.1",
-        "aria-hidden": "^1.1.1",
-        "react-remove-scroll": "2.5.5"
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.10",
+        "@radix-ui/react-focus-guards": "1.1.2",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.7",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.10",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
       },
       "peerDependencies": {
         "@types/react": "*",
         "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -2616,27 +2608,27 @@
       }
     },
     "node_modules/@radix-ui/react-popper": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.3.tgz",
-      "integrity": "sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==",
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.7.tgz",
+      "integrity": "sha512-IUFAccz1JyKcf/RjB552PlWwxjeCJB8/4KxT7EhBHOJM+mN7LdW+B3kacJXILm32xawcMMjb2i0cIZpo+f9kiQ==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
         "@floating-ui/react-dom": "^2.0.0",
-        "@radix-ui/react-arrow": "1.0.3",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-context": "1.0.1",
-        "@radix-ui/react-primitive": "1.0.3",
-        "@radix-ui/react-use-callback-ref": "1.0.1",
-        "@radix-ui/react-use-layout-effect": "1.0.1",
-        "@radix-ui/react-use-rect": "1.0.1",
-        "@radix-ui/react-use-size": "1.0.1",
-        "@radix-ui/rect": "1.0.1"
+        "@radix-ui/react-arrow": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-rect": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1",
+        "@radix-ui/rect": "1.1.1"
       },
       "peerDependencies": {
         "@types/react": "*",
         "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -2648,18 +2640,19 @@
       }
     },
     "node_modules/@radix-ui/react-portal": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz",
-      "integrity": "sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==",
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
+      "integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-primitive": "1.0.3"
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
       },
       "peerDependencies": {
         "@types/react": "*",
         "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -2671,19 +2664,19 @@
       }
     },
     "node_modules/@radix-ui/react-presence": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.1.tgz",
-      "integrity": "sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.4.tgz",
+      "integrity": "sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-use-layout-effect": "1.0.1"
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
       },
       "peerDependencies": {
         "@types/react": "*",
         "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -2695,18 +2688,18 @@
       }
     },
     "node_modules/@radix-ui/react-primitive": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
-      "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-slot": "1.0.2"
+        "@radix-ui/react-slot": "1.2.3"
       },
       "peerDependencies": {
         "@types/react": "*",
         "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -2718,26 +2711,26 @@
       }
     },
     "node_modules/@radix-ui/react-roving-focus": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz",
-      "integrity": "sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==",
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.10.tgz",
+      "integrity": "sha512-dT9aOXUen9JSsxnMPv/0VqySQf5eDQ6LCk5Sw28kamz8wSOW2bJdlX2Bg5VUIIcV+6XlHpWTIuTPCf/UNIyq8Q==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.1",
-        "@radix-ui/react-collection": "1.0.3",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-context": "1.0.1",
-        "@radix-ui/react-direction": "1.0.1",
-        "@radix-ui/react-id": "1.0.1",
-        "@radix-ui/react-primitive": "1.0.3",
-        "@radix-ui/react-use-callback-ref": "1.0.1",
-        "@radix-ui/react-use-controllable-state": "1.0.1"
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
       },
       "peerDependencies": {
         "@types/react": "*",
         "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -2749,16 +2742,16 @@
       }
     },
     "node_modules/@radix-ui/react-slot": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
-      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-compose-refs": "1.0.1"
+        "@radix-ui/react-compose-refs": "1.1.2"
       },
       "peerDependencies": {
         "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -2767,15 +2760,13 @@
       }
     },
     "node_modules/@radix-ui/react-use-callback-ref": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
-      "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
+      "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
+      "license": "MIT",
       "peerDependencies": {
         "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -2784,16 +2775,35 @@
       }
     },
     "node_modules/@radix-ui/react-use-controllable-state": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
-      "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+      "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-use-callback-ref": "1.0.1"
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
       },
       "peerDependencies": {
         "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-effect-event": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
+      "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -2802,16 +2812,16 @@
       }
     },
     "node_modules/@radix-ui/react-use-escape-keydown": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz",
-      "integrity": "sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz",
+      "integrity": "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-use-callback-ref": "1.0.1"
+        "@radix-ui/react-use-callback-ref": "1.1.1"
       },
       "peerDependencies": {
         "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -2820,15 +2830,13 @@
       }
     },
     "node_modules/@radix-ui/react-use-layout-effect": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
-      "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+      "license": "MIT",
       "peerDependencies": {
         "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -2837,16 +2845,16 @@
       }
     },
     "node_modules/@radix-ui/react-use-rect": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz",
-      "integrity": "sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
+      "integrity": "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/rect": "1.0.1"
+        "@radix-ui/rect": "1.1.1"
       },
       "peerDependencies": {
         "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -2855,16 +2863,16 @@
       }
     },
     "node_modules/@radix-ui/react-use-size": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz",
-      "integrity": "sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
+      "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-use-layout-effect": "1.0.1"
+        "@radix-ui/react-use-layout-effect": "1.1.1"
       },
       "peerDependencies": {
         "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -2873,12 +2881,10 @@
       }
     },
     "node_modules/@radix-ui/rect": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.0.1.tgz",
-      "integrity": "sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      }
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
+      "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
+      "license": "MIT"
     },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.6.1",
@@ -3456,9 +3462,10 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
     "node_modules/aria-hidden": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
-      "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
+      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+      "license": "MIT",
       "dependencies": {
         "tslib": "^2.0.0"
       },
@@ -4063,21 +4070,22 @@
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="
     },
     "node_modules/cookie": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
-      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
     },
     "node_modules/cookies-next": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/cookies-next/-/cookies-next-4.2.1.tgz",
-      "integrity": "sha512-qsjtZ8TLlxCSX2JphMQNhkm3V3zIMQ05WrLkBKBwu50npBbBfiZWIdmSMzBGcdGKfMK19E0PIitTfRFAdMGHXg==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/cookies-next/-/cookies-next-4.3.0.tgz",
+      "integrity": "sha512-XxeCwLR30cWwRd94sa9X5lRCDLVujtx73tv+N0doQCFIDl83fuuYdxbu/WQUt9aSV7EJx7bkMvJldjvzuFqr4w==",
       "license": "MIT",
       "dependencies": {
         "@types/cookie": "^0.6.0",
-        "cookie": "^0.6.0"
+        "cookie": "^0.7.0"
       }
     },
     "node_modules/core-js-compat": {
@@ -4196,7 +4204,8 @@
     "node_modules/detect-node-es": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
-      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
+      "license": "MIT"
     },
     "node_modules/didyoumean": {
       "version": "1.2.2",
@@ -5121,6 +5130,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
       "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
@@ -5404,14 +5414,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/invariant": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
-      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
-      "dependencies": {
-        "loose-envify": "^1.0.0"
-      }
-    },
     "node_modules/is-array-buffer": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
@@ -6026,13 +6028,13 @@
       }
     },
     "node_modules/livekit-server-sdk": {
-      "version": "2.12.0",
-      "resolved": "https://registry.npmjs.org/livekit-server-sdk/-/livekit-server-sdk-2.12.0.tgz",
-      "integrity": "sha512-6i2l0Ja1yhYvCXqU9wZ3SlWPEm1pYXpSJbpmT3sN0UWS61+jF6qkVY4AeSRQ53w5zrgzLBIyDwooBEMxz7XyMw==",
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/livekit-server-sdk/-/livekit-server-sdk-2.13.0.tgz",
+      "integrity": "sha512-fQJI/zEJRPeXKdKMkEfJNYSSnvmuPQsk2Q+X6tPfUrJPy7fnyYPax/icf/CZ8EYZQBhFgSD7WaKOYGSSfGSyZw==",
       "license": "Apache-2.0",
       "dependencies": {
         "@bufbuild/protobuf": "^1.7.2",
-        "@livekit/protocol": "^1.36.1",
+        "@livekit/protocol": "^1.38.0",
         "camelcase-keys": "^9.0.0",
         "jose": "^5.1.2"
       },
@@ -6040,6 +6042,15 @@
         "node": ">=18"
       }
     },
+    "node_modules/livekit-server-sdk/node_modules/@livekit/protocol": {
+      "version": "1.39.0",
+      "resolved": "https://registry.npmjs.org/@livekit/protocol/-/protocol-1.39.0.tgz",
+      "integrity": "sha512-Zar6711kJk1MjI+63DJoyCxv8deNphIIan7tK9C5f+Zy3v2Pvjs6Yz7cFoOeDK/rY7b7deA2wfYxUi2S5XLp7w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@bufbuild/protobuf": "^1.10.0"
+      }
+    },
     "node_modules/loader-runner": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -7017,6 +7028,22 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz",
+      "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -7037,12 +7064,12 @@
       }
     },
     "node_modules/qrcode.react": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-4.0.1.tgz",
-      "integrity": "sha512-Lpj0tPBn561WiQ3QQWXbkx8xTtB8BZkJeMZWLJIL8iaPBCoWzW1IpCeU3gY5MDqsb0+efCvEGkl9O0naP64crA==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-4.2.0.tgz",
+      "integrity": "sha512-QpgqWi8rD9DsS9EP3z7BT+5lY5SFhsqGjpgW5DY/i3mK4M9DTBNz3ErMi8BWYEfI3L0d8GIbGmcdFAS1uIRGjA==",
       "license": "ISC",
       "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
     "node_modules/queue-microtask": {
@@ -7117,22 +7144,23 @@
       "dev": true
     },
     "node_modules/react-remove-scroll": {
-      "version": "2.5.5",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
-      "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==",
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.0.tgz",
+      "integrity": "sha512-sGsQtcjMqdQyijAHytfGEELB8FufGbfXIsvUTe+NLx1GDRJCXtCFLBLUI1eyZCKXXvbEU2C6gai0PZKoIE9Vbg==",
+      "license": "MIT",
       "dependencies": {
-        "react-remove-scroll-bar": "^2.3.3",
-        "react-style-singleton": "^2.2.1",
+        "react-remove-scroll-bar": "^2.3.7",
+        "react-style-singleton": "^2.2.3",
         "tslib": "^2.1.0",
-        "use-callback-ref": "^1.3.0",
-        "use-sidecar": "^1.1.2"
+        "use-callback-ref": "^1.3.3",
+        "use-sidecar": "^1.1.3"
       },
       "engines": {
         "node": ">=10"
       },
       "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -7141,19 +7169,20 @@
       }
     },
     "node_modules/react-remove-scroll-bar": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz",
-      "integrity": "sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==",
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+      "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
+      "license": "MIT",
       "dependencies": {
-        "react-style-singleton": "^2.2.1",
+        "react-style-singleton": "^2.2.2",
         "tslib": "^2.0.0"
       },
       "engines": {
         "node": ">=10"
       },
       "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -7162,20 +7191,20 @@
       }
     },
     "node_modules/react-style-singleton": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
-      "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+      "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+      "license": "MIT",
       "dependencies": {
         "get-nonce": "^1.0.0",
-        "invariant": "^2.2.4",
         "tslib": "^2.0.0"
       },
       "engines": {
         "node": ">=10"
       },
       "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -8337,9 +8366,10 @@
       }
     },
     "node_modules/use-callback-ref": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.2.tgz",
-      "integrity": "sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+      "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+      "license": "MIT",
       "dependencies": {
         "tslib": "^2.0.0"
       },
@@ -8347,8 +8377,8 @@
         "node": ">=10"
       },
       "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -8357,9 +8387,10 @@
       }
     },
     "node_modules/use-sidecar": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
-      "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+      "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
+      "license": "MIT",
       "dependencies": {
         "detect-node-es": "^1.1.0",
         "tslib": "^2.0.0"
@@ -8368,8 +8399,8 @@
         "node": ">=10"
       },
       "peerDependencies": {
-        "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
diff --git a/package.json b/package.json
index 312f256..20f87a1 100644
--- a/package.json
+++ b/package.json
@@ -6,35 +6,37 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "format": "prettier --write ."
   },
   "dependencies": {
     "@livekit/components-react": "^2.9.3",
-    "@livekit/components-styles": "^1.1.1",
-    "@radix-ui/react-dropdown-menu": "^2.0.6",
-    "cookies-next": "^4.1.1",
-    "framer-motion": "^10.16.16",
+    "@livekit/components-styles": "^1.1.5",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "cookies-next": "^4.3.0",
+    "framer-motion": "^10.18.0",
     "js-yaml": "^4.1.0",
-    "livekit-client": "^2.5.1",
-    "livekit-server-sdk": "^2.6.1",
+    "livekit-client": "^2.9.5",
+    "livekit-server-sdk": "^2.13.0",
     "lodash": "^4.17.21",
-    "next": "^14.0.4",
+    "next": "^14.2.20",
     "next-plugin-preval": "^1.2.6",
-    "qrcode.react": "^4.0.0",
-    "react": "^18",
-    "react-dom": "^18"
+    "qrcode.react": "^4.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@types/js-yaml": "^4.0.9",
-    "@types/lodash": "^4.17.0",
-    "@types/node": "^20.10.4",
-    "@types/react": "^18.2.43",
-    "@types/react-dom": "^18",
-    "autoprefixer": "^10.4.16",
-    "eslint": "^8",
+    "@types/lodash": "^4.17.13",
+    "@types/node": "^20.17.9",
+    "@types/react": "^18.3.14",
+    "@types/react-dom": "^18.3.3",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^8.57.1",
     "eslint-config-next": "14.2.26",
-    "postcss": "^8.4.31",
-    "tailwindcss": "^3.3.5",
-    "typescript": "^5.3.3"
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.16",
+    "typescript": "^5.7.2",
+    "prettier": "^3.4.2"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
index 33ad091..12a703d 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/public/favicon.ico b/public/favicon.ico
index 718d6fea4835ec2d246af9800eddb7ffb276240c..258cd7df12e35e36ad2becd93e3569fe64d91911 100644
GIT binary patch
literal 15406
zcmeHOTWl0n7#^buyEC)xUV7QtZFiSaN`Z<M4TgddVxk~X9}J>Z5D)|j5{#lRMih-t
z;w?rKx?BXJF&YywEm-jKWTKG>CMG=kO7z7<Odyco|NCdpa&~rh+irK-CTx?F*_oYl
z&iCIhXKNTY88;izsKM8qvHcdqSYjAPF6Z9&#th>SKkM%=eBWajKeZZ0FTcZ6c!v9&
zFTQ`XX3e6RJVK!mVVGeaW{ARk#eF5r;c%GWDIF0zM9DUjIvkUt&F&h0^D*!0)vI*v
z+O^_1d-hkJ8>Zv?+v&gGv$BT8I4aG@+zS^j(7}UwI(#TkLm$6Ruk1+Bfj8S^4Xg!P
zs?En-V0QT3M^-h{<v((=2JZ2^68*rB{V~5a5vDIcbZGQ&iq@@((yhHVMIvFDI~DT<
zf4iySZxKG)<G`QK=LM&2g=k@qRm#6svnu}}zoDU_BAwVzmtUH70D9!de>?*Z6@PHW
z7_a{Lt*O?4%%L}9>95}!K|b?!3KMt;Ka=CJf(QIlrN1C)XskW6eR#d(qiktB*Lv-#
zucP*b4a1h<pWqvC)ngOh)92OeGuFl4*bi~6B_0+(pWthA6Jz4%;eyYa=$@ttzgRvj
z%i?w2f$y<*tT{{$`}VGkMRRi&&F-|Qz1774K1`H;tb6(LWr@A;-<8JD&;g+v{`|pv
zn<XA2CjWab%NR@oAAqlx{juj*e@71IDamxs&X}}zb(G_BRt7MD4~V(Y2gqO|{0IHx
z+5gzlJk7~k)W<RLiHA$~pTn|%KGcK$&6_vVz`y`4TQ)#<FCU<lD+XxQeamRyi?`8l
zU#IEZH)+l*9Ko>mfhax1vT)kNA{*GnWciQ1bv=h}burIheXga*^K&QC!UsHuKE$Ff
z?X|>LFaJTe=sB<H>bWU-$iCg!KPLlxfGn_gl<fiUtGy>n|8m|R_MGHgXV+74`t+S7
zeg1xuhTdwYH=b{y*LJng_Q5!%lBUpYS#G|IebtzZ{w-&j!@nS3KE6L$r1^^vl63n*
zo9554D3dlt-<vq6ti|Sad|v)z|5%m%drS6reeXnhUUmN>|HCf--*x$)7yh@>Ue?3y
zkAweKApF0se_R8wpM{<w4=&ZejuQP7-_Nn39`e`i5568gPwa1}(*G=-XCKhlV~gJv
z`}5d<&fl><d*zS)K?nRO{0Zy}wa+%@d71xN-7K-d;rb3bTQC2k_y`QHF9=bpAPYbL
zi&$7M{|oxTvm%B<%okZOA0+;;-__$!w-$dw{Qg)x*S`n<_4vDV>C%$@MHaj!bPTe9
zyy5c^_lohC>8~~Z0t+yxf&COd#RG*w`DMtWi|u0WY|cM;@5$sJYOk@bB^W&US5)O+
z1sfb|t%-i`<%2i>#C@&tXS`T+4C=GWH`Tqmj(5$*dpAbyR;e#=qdZ5Sgj=-6Mjnkm
z$&I1&4d2#~b3+HpbwK3^wO*&2r+&DRd#NF3RocB@jx?P#==gyR^*eHV<ksk4HAUPj
zKI1v)(Q`}8pDFl(9k_uRJ%dDyM?6GvzQ&^NbDRO;JzWmdfnV`W@gIBzcJz7@v9Q!I
zsB6;P*TEJ2pBAPCwFTb8`)Y2z@Y}Xc)kY)|;d8_Cfm#hU2lx)`sK3!8n8&@D`P~+w
zM}wLabby9teouN7tUHPilcfQ;FI~DsSFT){@E9C?tcV@;>>@rN9mzX%>3p_0{yCcw
z8qoiME=g~<AcM(b$9&)i_FDcnY#5|C_a}iZ%e}Ze7uj_Bh*Rtdpf><oAcr)|0Co{!
z87Li^Zv2}z4GQ*5%A{_t;RhB+=)0q-GW_$qZLtT~G<0pI;NQAskg^>n_aEHe@I6Z+
z^!>4N{NO)qK=_Zdfq?br;>C+JIyy?j!^1L0Mn(wZ<jG+=b!wPKza617r$=b-p8ILb
zqcM7RFh)Dq$7#=&1by~iyU+kRoIaAGlWY&@HKDfx-wGcTG=5<3?d>JUab%=Y4t1m*
z%5*x^H9JMUJt^w%OVd{$W$3S;3*(mz{rO|3&;U6M+z}CbfK8)s2>;ZC{tRM3!2Ac_
zfgL_hk4^D{e@EZEr^}+@p;B7~Ej!o8q|b|<7Hk@R3D^-Ig7E)-{zu_g*i~!-7GUqr
znbbGW7Ts{qLU0C_6Ino)de|NWJL`<_oo!aIGw)UGs;B?=`cL48&LGwZc0LnB4?V}W
z+QWS9n`g-x#;Jqgzk8OW@NZogllK(gakhc874SmG9wh#ekzq=+zQb2TXAoEK>W_$x
z?%tT77oJYgOV1?e*xN}ub;zNU2U9f6c8c?%H7lE4U&AyDcE)X*<!3`vfgilbd1xn}
zA?<iFUczhe`{iv3vC;koHZ7QI%UK4_o7!5?$LI4j8^4qC$39i~+gcD?E#`fq96!ro
zai1;vBs$OfCBBAv585Tyfv>5fzwyRwKl@esgPc+DGcNddUDt*GMf|pFvz74IF<+Yq
zex*OqiOTvDA<-Ys5$0sw-}kk8^v7$r>fVc`mV00Rv;Rr6|8eaXzv0vDcaztCImWUd
zLM%}B3tyFpnFafW@45b)J%v3;{rCD$oN0;w<lk2yZdLZ5S%UvWP6Yo6-&ORV1sj+u
z{D{Ba_yyZ^<CjYVa+~Wmk=5cCpKYhyT5P)FSEc*`xqc=c*766$FZVYne{&85J6|{#
zbypz<d-De^j@6>?-Z_5yukr^aYvfyQo#^TWXvncHLEkIpZ;Nd$e}g?hm!>{{E1^O1
z2{)%fK95)nefQ6w9jV1oPogGn=QuJ|`7`*ROeRbEGoVB7HMlm-v5jq2uU~%fsbA)?
z&Fl3`(Dj!WzmkE_!1{|^Qt~?13CT&Nel#WL_pcwh{^foO>MyAu3pU`@<y!75>A%i@
z9luV4>YM2G`<YKF*N^CD1yR3y`zI$(oG8&BFMiy^rr}?UG_apRtp%Uz+dttL7)1XB
zGJ_2Cf!`|Xvh>5RXb``|c@loNfcW6szhd2iy_Dp1%maOopg&ilLAPnpfI1zvD*Z#o
zjsJN7cIh9Y2dc&4pfOilU#CZp)6fyszr_{z=o=RMw=)nwXaNn#_u-q0{d2~R&#G=$
zeFsH*HU0$sox-4BflutZVB63Y^-O<HeGVF9we=N-$y}?g-}tWl%&x(c22UC~5WEiX
O&x0C&4Gz@If&T%?FPY8&

literal 25931
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
LrJugUA?W`A8`#=m

diff --git a/public/next.svg b/public/next.svg
deleted file mode 100644
index 5174b28..0000000
--- a/public/next.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
diff --git a/public/vercel.svg b/public/vercel.svg
deleted file mode 100644
index d2f8422..0000000
--- a/public/vercel.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
\ No newline at end of file
diff --git a/src/cloud/README.md b/src/cloud/README.md
index c169d34..f56137e 100644
--- a/src/cloud/README.md
+++ b/src/cloud/README.md
@@ -1 +1 @@
-Files in this `cloud/` directory can be ignored. They are mocks which we override in our private, hosted version of the agents-playground that supports LiveKit Cloud authentication.
\ No newline at end of file
+Files in this `cloud/` directory can be ignored. They are mocks which we override in our private, hosted version of the agents-playground that supports LiveKit Cloud authentication.
diff --git a/src/cloud/useCloud.tsx b/src/cloud/useCloud.tsx
index 1d994fb..0c5e767 100644
--- a/src/cloud/useCloud.tsx
+++ b/src/cloud/useCloud.tsx
@@ -9,4 +9,4 @@ export function useCloud() {
   const wsUrl = "";
 
   return { generateToken, wsUrl };
-}
\ No newline at end of file
+}
diff --git a/src/components/config/AttributeRow.tsx b/src/components/config/AttributeRow.tsx
new file mode 100644
index 0000000..84e7607
--- /dev/null
+++ b/src/components/config/AttributeRow.tsx
@@ -0,0 +1,60 @@
+import React from "react";
+import { AttributeItem } from "@/lib/types";
+
+interface AttributeRowProps {
+  attribute: AttributeItem;
+  onKeyChange: (id: string, newKey: string) => void;
+  onValueChange: (id: string, newValue: string) => void;
+  onRemove?: (id: string) => void;
+  disabled?: boolean;
+}
+
+export const AttributeRow: React.FC<AttributeRowProps> = ({
+  attribute,
+  onKeyChange,
+  onValueChange,
+  onRemove,
+  disabled = false,
+}) => {
+  return (
+    <div className="flex items-center gap-2 mb-2">
+      <input
+        value={attribute.key}
+        onChange={(e) => onKeyChange(attribute.id, e.target.value)}
+        className="flex-1 min-w-0 text-gray-400 text-sm bg-transparent border border-gray-800 rounded-sm px-3 py-1 font-mono"
+        placeholder="Name"
+        disabled={disabled}
+      />
+      <input
+        value={attribute.value}
+        onChange={(e) => onValueChange(attribute.id, e.target.value)}
+        className="flex-1 min-w-0 text-gray-400 text-sm bg-transparent border border-gray-800 rounded-sm px-3 py-1 font-mono"
+        placeholder="Value"
+        disabled={disabled}
+      />
+      {onRemove && (
+        <button
+          onClick={() => onRemove(attribute.id)}
+          className="flex-shrink-0 w-6 h-6 flex items-center justify-center text-gray-400 hover:text-white"
+          disabled={disabled}
+          style={{ display: disabled ? "none" : "flex" }}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-4 w-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+};
diff --git a/src/components/config/AttributesEditor.tsx b/src/components/config/AttributesEditor.tsx
deleted file mode 100644
index bfead72..0000000
--- a/src/components/config/AttributesEditor.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import React from 'react';
-import { ConnectionState } from 'livekit-client';
-import { AttributeItem } from '@/lib/types';
-
-
-interface AttributesEditorProps {
-  attributes: AttributeItem[];
-  onAttributesChange: (attributes: AttributeItem[]) => void;
-  themeColor: string;
-  disabled?: boolean;
-  connectionState?: ConnectionState;
-}
-
-export const AttributesEditor: React.FC<AttributesEditorProps> = ({
-  attributes,
-  onAttributesChange,
-  themeColor,
-  disabled = false,
-  connectionState
-}) => {
-  const handleKeyChange = (id: string, newKey: string) => {
-    const updatedAttributes = attributes.map(attr => 
-      attr.id === id ? { ...attr, key: newKey } : attr
-    );
-    onAttributesChange(updatedAttributes);
-  };
-
-  const handleValueChange = (id: string, newValue: string) => {
-    const updatedAttributes = attributes.map(attr => 
-      attr.id === id ? { ...attr, value: newValue } : attr
-    );
-    onAttributesChange(updatedAttributes);
-  };
-
-  const handleRemoveAttribute = (id: string) => {
-    const updatedAttributes = attributes.filter(attr => attr.id !== id);
-    onAttributesChange(updatedAttributes);
-  };
-
-  const handleAddAttribute = () => {
-    const newId = `attr_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-    const updatedAttributes = [...attributes, { id: newId, key: "", value: "" }];
-    onAttributesChange(updatedAttributes);
-  };
-
-  return (
-    <div className="border border-gray-800 rounded-sm p-3 bg-gray-900/30">
-      {attributes.map((attribute) => (
-        <div key={attribute.id} className="flex items-center gap-2 mb-2">
-          <input
-            value={attribute.key}
-            onChange={(e) => handleKeyChange(attribute.id, e.target.value)}
-            className="flex-1 min-w-0 text-white text-sm bg-transparent border border-gray-800 rounded-sm px-3 py-1"
-            placeholder="Key"
-            disabled={disabled}
-          />
-          <input
-            value={attribute.value}
-            onChange={(e) => handleValueChange(attribute.id, e.target.value)}
-            className="flex-1 min-w-0 text-white text-sm bg-transparent border border-gray-800 rounded-sm px-3 py-1"
-            placeholder="Value"
-            disabled={disabled}
-          />
-          <button
-            onClick={() => handleRemoveAttribute(attribute.id)}
-            className="flex-shrink-0 w-6 h-6 flex items-center justify-center text-gray-400 hover:text-white"
-            disabled={disabled}
-            style={{ display: disabled ? 'none' : 'flex' }}
-          >
-            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-            </svg>
-          </button>
-        </div>
-      ))}
-      
-      <button
-        onClick={handleAddAttribute}
-        className={`text-xs py-1 px-2 rounded-sm flex items-center gap-1 ${
-          disabled
-            ? "bg-gray-700 text-gray-500 cursor-not-allowed" 
-            : `bg-${themeColor}-500 hover:bg-${themeColor}-600 text-white`
-        }`}
-        disabled={disabled}
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
-        </svg>
-        Add Attribute
-      </button>
-    </div>
-  );
-};
\ No newline at end of file
diff --git a/src/components/config/AttributesInspector.tsx b/src/components/config/AttributesInspector.tsx
new file mode 100644
index 0000000..f4c036f
--- /dev/null
+++ b/src/components/config/AttributesInspector.tsx
@@ -0,0 +1,268 @@
+import React, { useState, useCallback, useEffect, useRef } from "react";
+import { ConnectionState } from "livekit-client";
+import { AttributeItem } from "@/lib/types";
+import { Button } from "@/components/button/Button";
+import { useLocalParticipant } from "@livekit/components-react";
+import { AttributeRow } from "./AttributeRow";
+
+interface AttributesInspectorProps {
+  attributes: AttributeItem[];
+  onAttributesChange: (attributes: AttributeItem[]) => void;
+  themeColor: string;
+  disabled?: boolean;
+  connectionState?: ConnectionState;
+  metadata?: string;
+  onMetadataChange?: (metadata: string) => void;
+}
+
+export const AttributesInspector: React.FC<AttributesInspectorProps> = ({
+  attributes,
+  onAttributesChange,
+  themeColor,
+  disabled = false,
+  connectionState,
+  metadata,
+  onMetadataChange,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isMetadataExpanded, setIsMetadataExpanded] = useState(false);
+  const [localAttributes, setLocalAttributes] =
+    useState<AttributeItem[]>(attributes);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+  const [showSyncFlash, setShowSyncFlash] = useState(false);
+  const { localParticipant } = useLocalParticipant();
+  const timeoutRef = useRef<NodeJS.Timeout>();
+  const syncFlashTimeoutRef = useRef<NodeJS.Timeout>();
+
+  // Update local attributes when props change
+  useEffect(() => {
+    setLocalAttributes(attributes);
+  }, [attributes]);
+
+  const syncAttributesWithRoom = useCallback(() => {
+    if (!localParticipant || connectionState !== ConnectionState.Connected)
+      return;
+
+    const attributesMap = localAttributes.reduce(
+      (acc, attr) => {
+        if (attr.key && attr.key.trim() !== "") {
+          acc[attr.key] = attr.value;
+        }
+        return acc;
+      },
+      {} as Record<string, string>,
+    );
+
+    localParticipant.setAttributes(attributesMap);
+    setHasUnsavedChanges(false);
+    setShowSyncFlash(true);
+    if (syncFlashTimeoutRef.current) {
+      clearTimeout(syncFlashTimeoutRef.current);
+    }
+    syncFlashTimeoutRef.current = setTimeout(
+      () => setShowSyncFlash(false),
+      1000,
+    );
+  }, [localAttributes, localParticipant, connectionState]);
+
+  // Handle debounced sync
+  useEffect(() => {
+    if (!hasUnsavedChanges) return;
+
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    timeoutRef.current = setTimeout(() => {
+      if (connectionState === ConnectionState.Connected && localParticipant) {
+        syncAttributesWithRoom();
+      }
+    }, 2000);
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [
+    hasUnsavedChanges,
+    syncAttributesWithRoom,
+    connectionState,
+    localParticipant,
+  ]);
+
+  const handleKeyChange = (id: string, newKey: string) => {
+    const updatedAttributes = localAttributes.map((attr) =>
+      attr.id === id ? { ...attr, key: newKey } : attr,
+    );
+    setLocalAttributes(updatedAttributes);
+    onAttributesChange(updatedAttributes);
+    if (connectionState === ConnectionState.Connected && newKey.trim() !== "") {
+      setHasUnsavedChanges(true);
+    }
+  };
+
+  const handleValueChange = (id: string, newValue: string) => {
+    const updatedAttributes = localAttributes.map((attr) =>
+      attr.id === id ? { ...attr, value: newValue } : attr,
+    );
+    setLocalAttributes(updatedAttributes);
+    onAttributesChange(updatedAttributes);
+    if (connectionState === ConnectionState.Connected) {
+      setHasUnsavedChanges(true);
+    }
+  };
+
+  const handleRemoveAttribute = (id: string) => {
+    const updatedAttributes = localAttributes.filter((attr) => attr.id !== id);
+    setLocalAttributes(updatedAttributes);
+    onAttributesChange(updatedAttributes);
+    if (connectionState === ConnectionState.Connected) {
+      setHasUnsavedChanges(true);
+    }
+  };
+
+  const handleAddAttribute = () => {
+    const newId = `attr_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    const updatedAttributes = [
+      ...localAttributes,
+      { id: newId, key: "", value: "" },
+    ];
+    setLocalAttributes(updatedAttributes);
+    onAttributesChange(updatedAttributes);
+    if (connectionState === ConnectionState.Connected) {
+      setHasUnsavedChanges(true);
+    }
+  };
+
+  return (
+    <div>
+      <div
+        className="flex items-center justify-between mb-2 cursor-pointer"
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        <div className="text-sm text-gray-500">Attributes</div>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className={`h-4 w-4 text-gray-500 transition-transform ${isExpanded ? "rotate-180" : ""}`}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
+      </div>
+      {isExpanded && (
+        <div className="border border-gray-800 rounded-sm bg-gray-900/30 p-3 mb-2">
+          {disabled ? (
+            localAttributes.length === 0 ? (
+              <div className="text-sm text-gray-400 font-sans">
+                No attributes set
+              </div>
+            ) : (
+              localAttributes.map((attribute) => (
+                <AttributeRow
+                  key={attribute.id}
+                  attribute={attribute}
+                  onKeyChange={handleKeyChange}
+                  onValueChange={handleValueChange}
+                  disabled={true}
+                />
+              ))
+            )
+          ) : (
+            <>
+              {localAttributes.map((attribute) => (
+                <AttributeRow
+                  key={attribute.id}
+                  attribute={attribute}
+                  onKeyChange={handleKeyChange}
+                  onValueChange={handleValueChange}
+                  onRemove={handleRemoveAttribute}
+                  disabled={disabled}
+                />
+              ))}
+              <div className="flex justify-between items-center">
+                <Button
+                  accentColor={themeColor}
+                  onClick={handleAddAttribute}
+                  className="text-xs flex items-center gap-1"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="h-3 w-3"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M12 4v16m8-8H4"
+                    />
+                  </svg>
+                  Attribute
+                </Button>
+                {showSyncFlash && (
+                  <div className="text-xs text-gray-400 animate-fade-in-out">
+                    Changes saved
+                  </div>
+                )}
+              </div>
+            </>
+          )}
+        </div>
+      )}
+      <>
+        <div
+          className="flex items-center justify-between mb-2 cursor-pointer"
+          onClick={() => setIsMetadataExpanded(!isMetadataExpanded)}
+        >
+          <div className="text-sm text-gray-500">Metadata</div>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className={`h-4 w-4 text-gray-500 transition-transform ${isMetadataExpanded ? "rotate-180" : ""}`}
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M19 9l-7 7-7-7"
+            />
+          </svg>
+        </div>
+        {isMetadataExpanded &&
+          (disabled || connectionState === ConnectionState.Connected ? (
+            <div className="border border-gray-800 rounded-sm bg-gray-900/30 px-3 py-2 mb-4 min-h-[40px] flex items-center">
+              {metadata ? (
+                <pre className="w-full text-gray-400 text-xs bg-transparent font-mono whitespace-pre-wrap break-words m-0 p-0 border-0">
+                  {metadata}
+                </pre>
+              ) : (
+                <div className="text-sm text-gray-400 font-sans w-full text-left">
+                  No metadata set
+                </div>
+              )}
+            </div>
+          ) : (
+            <textarea
+              value={metadata}
+              onChange={(e) => onMetadataChange?.(e.target.value)}
+              className="w-full text-gray-400 text-sm bg-transparent border border-gray-800 rounded-sm px-3 py-2 font-mono mb-4"
+              placeholder="Enter metadata..."
+              rows={3}
+            />
+          ))}
+      </>
+    </div>
+  );
+};
diff --git a/src/components/config/ConfigurationPanelItem.tsx b/src/components/config/ConfigurationPanelItem.tsx
index 6b2abf1..c3c448d 100644
--- a/src/components/config/ConfigurationPanelItem.tsx
+++ b/src/components/config/ConfigurationPanelItem.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode, useState } from "react";
 import { PlaygroundDeviceSelector } from "@/components/playground/PlaygroundDeviceSelector";
 import { TrackToggle } from "@livekit/components-react";
 import { Track } from "livekit-client";
@@ -7,35 +7,65 @@ type ConfigurationPanelItemProps = {
   title: string;
   children?: ReactNode;
   source?: Track.Source;
+  collapsible?: boolean;
+  defaultCollapsed?: boolean;
 };
 
 export const ConfigurationPanelItem: React.FC<ConfigurationPanelItemProps> = ({
   children,
   title,
   source,
+  collapsible = false,
+  defaultCollapsed = false,
 }) => {
+  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+
   return (
     <div className="w-full text-gray-300 py-4 border-b border-b-gray-800 relative">
       <div className="flex flex-row justify-between items-center px-4 text-xs uppercase tracking-wider">
         <h3>{title}</h3>
-        {source && (
-          <span className="flex flex-row gap-2">
-            <TrackToggle
-              className="px-2 py-1 bg-gray-900 text-gray-300 border border-gray-800 rounded-sm hover:bg-gray-800"
-              source={source}
-            />
-            {source === Track.Source.Camera && (
-              <PlaygroundDeviceSelector kind="videoinput" />
-            )}
-            {source === Track.Source.Microphone && (
-              <PlaygroundDeviceSelector kind="audioinput" />
-            )}
-          </span>
-        )}
-      </div>
-      <div className="px-4 py-2 text-xs text-gray-500 leading-normal">
-        {children}
+        <div className="flex items-center gap-2">
+          {source && (
+            <span className="flex flex-row gap-2">
+              <TrackToggle
+                className="px-2 py-1 bg-gray-900 text-gray-300 border border-gray-800 rounded-sm hover:bg-gray-800"
+                source={source}
+              />
+              {source === Track.Source.Camera && (
+                <PlaygroundDeviceSelector kind="videoinput" />
+              )}
+              {source === Track.Source.Microphone && (
+                <PlaygroundDeviceSelector kind="audioinput" />
+              )}
+            </span>
+          )}
+          {collapsible && (
+            <button
+              onClick={() => setIsCollapsed(!isCollapsed)}
+              className="text-gray-400 hover:text-gray-300 transition-colors"
+            >
+              <svg
+                className={`w-4 h-4 transform transition-transform ${!isCollapsed ? "rotate-180" : ""}`}
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M19 9l-7 7-7-7"
+                />
+              </svg>
+            </button>
+          )}
+        </div>
       </div>
+      {!isCollapsed && (
+        <div className="px-4 py-2 text-xs text-gray-500 leading-normal">
+          {children}
+        </div>
+      )}
     </div>
   );
 };
diff --git a/src/components/config/NameValueRow.tsx b/src/components/config/NameValueRow.tsx
index 4606d7d..da01d3a 100644
--- a/src/components/config/NameValueRow.tsx
+++ b/src/components/config/NameValueRow.tsx
@@ -52,11 +52,5 @@ export const EditableNameValueRow: React.FC<EditableNameValueRowProps> = ({
       </div>
     );
   }
-  return (
-    <NameValueRow
-      name={name}
-      value={value}
-      valueColor={valueColor}
-    />
-  );
+  return <NameValueRow name={name} value={value} valueColor={valueColor} />;
 };
diff --git a/src/components/playground/Playground.tsx b/src/components/playground/Playground.tsx
index 55b0561..77d3cc2 100644
--- a/src/components/playground/Playground.tsx
+++ b/src/components/playground/Playground.tsx
@@ -24,13 +24,15 @@ import {
   useTracks,
   useVoiceAssistant,
   useRoomContext,
+  useParticipantAttributes,
 } from "@livekit/components-react";
 import { ConnectionState, LocalParticipant, Track } from "livekit-client";
 import { QRCodeSVG } from "qrcode.react";
 import { ReactNode, useCallback, useEffect, useMemo, useState } from "react";
 import tailwindTheme from "../../lib/tailwindTheme.preval";
 import { EditableNameValueRow } from "@/components/config/NameValueRow";
-import { AttributesEditor } from "@/components/config/AttributesEditor";
+import { AttributesInspector } from "@/components/config/AttributesInspector";
+import { RpcPanel } from "./RpcPanel";
 
 export interface PlaygroundMeta {
   name: string;
@@ -63,6 +65,7 @@ export default function Playground({
 
   const [rpcMethod, setRpcMethod] = useState("");
   const [rpcPayload, setRpcPayload] = useState("");
+  const [showRpc, setShowRpc] = useState(false);
 
   useEffect(() => {
     if (roomState === ConnectionState.Connected) {
@@ -74,27 +77,27 @@ export default function Playground({
   const agentVideoTrack = tracks.find(
     (trackRef) =>
       trackRef.publication.kind === Track.Kind.Video &&
-      trackRef.participant.isAgent
+      trackRef.participant.isAgent,
   );
 
   const localTracks = tracks.filter(
-    ({ participant }) => participant instanceof LocalParticipant
+    ({ participant }) => participant instanceof LocalParticipant,
   );
   const localCameraTrack = localTracks.find(
-    ({ source }) => source === Track.Source.Camera
+    ({ source }) => source === Track.Source.Camera,
   );
   const localScreenTrack = localTracks.find(
-    ({ source }) => source === Track.Source.ScreenShare
+    ({ source }) => source === Track.Source.ScreenShare,
   );
   const localMicTrack = localTracks.find(
-    ({ source }) => source === Track.Source.Microphone
+    ({ source }) => source === Track.Source.Microphone,
   );
 
   const onDataReceived = useCallback(
     (msg: any) => {
       if (msg.topic === "transcription") {
         const decoded = JSON.parse(
-          new TextDecoder("utf-8").decode(msg.payload)
+          new TextDecoder("utf-8").decode(msg.payload),
         );
         let timestamp = new Date().getTime();
         if ("timestamp" in decoded && decoded.timestamp > 0) {
@@ -111,7 +114,7 @@ export default function Playground({
         ]);
       }
     },
-    [transcripts]
+    [transcripts],
   );
 
   useDataChannel(onDataReceived);
@@ -121,14 +124,14 @@ export default function Playground({
 
     const disconnectedContent = (
       <div className="flex items-center justify-center text-gray-700 text-center w-full h-full">
-        No video track. Connect to get started.
+        No agent video track. Connect to get started.
       </div>
     );
 
     const loadingContent = (
       <div className="flex flex-col items-center justify-center gap-2 text-gray-700 text-center h-full w-full">
         <LoadingSVG />
-        Waiting for video track
+        Waiting for agent video track…
       </div>
     );
 
@@ -159,25 +162,25 @@ export default function Playground({
     document.body.style.setProperty(
       "--lk-theme-color",
       // @ts-ignore
-      tailwindTheme.colors[config.settings.theme_color]["500"]
+      tailwindTheme.colors[config.settings.theme_color]["500"],
     );
     document.body.style.setProperty(
       "--lk-drop-shadow",
-      `var(--lk-theme-color) 0px 0px 18px`
+      `var(--lk-theme-color) 0px 0px 18px`,
     );
   }, [config.settings.theme_color]);
 
   const audioTileContent = useMemo(() => {
     const disconnectedContent = (
       <div className="flex flex-col items-center justify-center gap-2 text-gray-700 text-center w-full">
-        No audio track. Connect to get started.
+        No agent audio track. Connect to get started.
       </div>
     );
 
     const waitingContent = (
       <div className="flex flex-col items-center gap-2 text-gray-700 text-center w-full">
         <LoadingSVG />
-        Waiting for audio track
+        Waiting for agent audio track…
       </div>
     );
 
@@ -220,145 +223,63 @@ export default function Playground({
       );
     }
     return <></>;
-  }, [config.settings.theme_color, voiceAssistant.audioTrack, voiceAssistant.agent]);
+  }, [
+    config.settings.theme_color,
+    voiceAssistant.audioTrack,
+    voiceAssistant.agent,
+  ]);
 
   const handleRpcCall = useCallback(async () => {
-    if (!voiceAssistant.agent || !room) return;
-    
-    try {
-      const response = await room.localParticipant.performRpc({
-        destinationIdentity: voiceAssistant.agent.identity,
-        method: rpcMethod,
-        payload: rpcPayload,
-      });
-      console.log('RPC response:', response);
-    } catch (e) {
-      console.error('RPC call failed:', e);
+    if (!voiceAssistant.agent || !room) {
+      throw new Error("No agent or room available");
     }
+
+    const response = await room.localParticipant.performRpc({
+      destinationIdentity: voiceAssistant.agent.identity,
+      method: rpcMethod,
+      payload: rpcPayload,
+    });
+    return response;
   }, [room, rpcMethod, rpcPayload, voiceAssistant.agent]);
 
+  const agentAttributes = useParticipantAttributes({
+    participant: voiceAssistant.agent,
+  });
+
   const settingsTileContent = useMemo(() => {
     return (
-      <div className="flex flex-col gap-4 h-full w-full items-start overflow-y-auto">
+      <div className="flex flex-col h-full w-full items-start overflow-y-auto">
         {config.description && (
           <ConfigurationPanelItem title="Description">
             {config.description}
           </ConfigurationPanelItem>
         )}
 
-        <ConfigurationPanelItem title="Settings">
-          <div className="flex flex-col gap-4">
+        <ConfigurationPanelItem title="Room">
+          <div className="flex flex-col gap-2">
             <EditableNameValueRow
-              name="Room"
-              value={roomState === ConnectionState.Connected ? name : config.settings.room_name}
+              name="Room name"
+              value={
+                roomState === ConnectionState.Connected
+                  ? name
+                  : config.settings.room_name
+              }
               valueColor={`${config.settings.theme_color}-500`}
               onValueChange={(value) => {
                 const newSettings = { ...config.settings };
                 newSettings.room_name = value;
                 setUserSettings(newSettings);
               }}
-              placeholder="Enter room name"
+              placeholder="Auto"
               editable={roomState !== ConnectionState.Connected}
             />
-            <EditableNameValueRow
-              name="Participant ID"
-              value={roomState === ConnectionState.Connected ? 
-                (localParticipant?.identity || '') : 
-                (config.settings.participant_id || '')}
-              valueColor={`${config.settings.theme_color}-500`}
-              onValueChange={(value) => {
-                const newSettings = { ...config.settings };
-                newSettings.participant_id = value;
-                setUserSettings(newSettings);
-              }}
-              placeholder="Enter participant id"
-              editable={roomState !== ConnectionState.Connected}
-            />
-            <EditableNameValueRow
-              name="Participant Name"
-              value={roomState === ConnectionState.Connected ? 
-                (localParticipant?.name || '') : 
-                (config.settings.participant_name || '')}
-              valueColor={`${config.settings.theme_color}-500`}
-              onValueChange={(value) => {
-                const newSettings = { ...config.settings };
-                newSettings.participant_name = value;
-                setUserSettings(newSettings);
-              }}
-              placeholder="Enter participant name"
-              editable={roomState !== ConnectionState.Connected}
-            />
-          </div>
-          
-          <div className="flex flex-col gap-2 mt-4">
-            <div className="text-xs text-gray-500 mt-2">Metadata</div>
-            <textarea
-              value={config.settings.metadata || ""}
-              onChange={(e) => {
-                const newSettings = { ...config.settings };
-                newSettings.metadata = e.target.value;
-                setUserSettings(newSettings);
-              }}
-              className="w-full text-white text-sm bg-transparent border border-gray-800 rounded-sm px-3 py-2"
-              placeholder="Custom metadata..."
-              rows={2}
-              disabled={roomState === ConnectionState.Connected}
-            />
-            
-            <div className="text-xs text-gray-500 mt-2">Attributes</div>
-            <AttributesEditor
-              attributes={config.settings.attributes || []}
-              onAttributesChange={(newAttributes) => {
-                const newSettings = { ...config.settings };
-                newSettings.attributes = newAttributes;
-                setUserSettings(newSettings);
-              }}
-              themeColor={config.settings.theme_color}
-              disabled={roomState === ConnectionState.Connected}
-            />
-          </div>
-
-          <div className="flex flex-col gap-2 mt-4">
-            <div className="text-xs text-gray-500 mt-2">RPC Method</div>
-            <input
-              type="text"
-              value={rpcMethod}
-              onChange={(e) => setRpcMethod(e.target.value)}
-              className="w-full text-white text-sm bg-transparent border border-gray-800 rounded-sm px-3 py-2"
-              placeholder="RPC method name"
-            />
-            
-            <div className="text-xs text-gray-500 mt-2">RPC Payload</div>
-            <textarea
-              value={rpcPayload}
-              onChange={(e) => setRpcPayload(e.target.value)}
-              className="w-full text-white text-sm bg-transparent border border-gray-800 rounded-sm px-3 py-2"
-              placeholder="RPC payload"
-              rows={2}
-            />
-            
-            <button
-              onClick={handleRpcCall}
-              disabled={!voiceAssistant.agent || !rpcMethod}
-              className={`mt-2 px-2 py-1 rounded-sm text-xs 
-                ${voiceAssistant.agent && rpcMethod 
-                  ? `bg-${config.settings.theme_color}-500 hover:bg-${config.settings.theme_color}-600` 
-                  : 'bg-gray-700 cursor-not-allowed'
-                } text-white`}
-            >
-              Perform RPC Call
-            </button>
-          </div>
-        </ConfigurationPanelItem>
-        <ConfigurationPanelItem title="Status">
-          <div className="flex flex-col gap-2">
             <NameValueRow
-              name="Room connected"
+              name="Status"
               value={
                 roomState === ConnectionState.Connecting ? (
                   <LoadingSVG diameter={16} strokeWidth={2} />
                 ) : (
-                  roomState.toUpperCase()
+                  roomState.charAt(0).toUpperCase() + roomState.slice(1)
                 )
               }
               valueColor={
@@ -367,15 +288,36 @@ export default function Playground({
                   : "gray-500"
               }
             />
+          </div>
+        </ConfigurationPanelItem>
+
+        <ConfigurationPanelItem title="Agent">
+          <div className="flex flex-col gap-2">
+            <EditableNameValueRow
+              name="Agent name"
+              value={
+                roomState === ConnectionState.Connected
+                  ? config.settings.agent_name || "None"
+                  : config.settings.agent_name || ""
+              }
+              valueColor={`${config.settings.theme_color}-500`}
+              onValueChange={(value) => {
+                const newSettings = { ...config.settings };
+                newSettings.agent_name = value;
+                setUserSettings(newSettings);
+              }}
+              placeholder="None"
+              editable={roomState !== ConnectionState.Connected}
+            />
             <NameValueRow
-              name="Agent connected"
+              name="Identity"
               value={
                 voiceAssistant.agent ? (
-                  "TRUE"
+                  voiceAssistant.agent.identity
                 ) : roomState === ConnectionState.Connected ? (
                   <LoadingSVG diameter={12} strokeWidth={2} />
                 ) : (
-                  "FALSE"
+                  "No agent connected"
                 )
               }
               valueColor={
@@ -384,32 +326,122 @@ export default function Playground({
                   : "gray-500"
               }
             />
+            {roomState === ConnectionState.Connected &&
+              voiceAssistant.agent && (
+                <AttributesInspector
+                  attributes={Object.entries(
+                    agentAttributes.attributes || {},
+                  ).map(([key, value], index) => ({
+                    id: `agent-attr-${index}`,
+                    key,
+                    value: String(value),
+                  }))}
+                  onAttributesChange={() => {}}
+                  themeColor={config.settings.theme_color}
+                  disabled={true}
+                />
+              )}
+            <p className="text-xs text-gray-500 text-right">
+              Set an agent name to use{" "}
+              <a
+                href="https://docs.livekit.io/agents/worker/dispatch#explicit"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-gray-500 hover:text-gray-300 underline"
+              >
+                explicit dispatch
+              </a>
+              .
+            </p>
           </div>
         </ConfigurationPanelItem>
-        {roomState === ConnectionState.Connected && config.settings.inputs.screen && (
-          <ConfigurationPanelItem
-            title="Screen"
-            source={Track.Source.ScreenShare}
-          >
-            {localScreenTrack ? (
-              <div className="relative">
-                <VideoTrack
-                  className="rounded-sm border border-gray-800 opacity-70 w-full"
-                  trackRef={localScreenTrack}
-                />
-              </div>
-            ) : (
-              <div className="flex items-center justify-center text-gray-700 text-center w-full h-full">
-                Press the button above to share your screen.
-              </div>
-            )}
-          </ConfigurationPanelItem>
+
+        <ConfigurationPanelItem title="User">
+          <div className="flex flex-col gap-2">
+            <EditableNameValueRow
+              name="Name"
+              value={
+                roomState === ConnectionState.Connected
+                  ? localParticipant?.name || ""
+                  : config.settings.participant_name || ""
+              }
+              valueColor={`${config.settings.theme_color}-500`}
+              onValueChange={(value) => {
+                const newSettings = { ...config.settings };
+                newSettings.participant_name = value;
+                setUserSettings(newSettings);
+              }}
+              placeholder="Auto"
+              editable={roomState !== ConnectionState.Connected}
+            />
+            <EditableNameValueRow
+              name="Identity"
+              value={
+                roomState === ConnectionState.Connected
+                  ? localParticipant?.identity || ""
+                  : config.settings.participant_id || ""
+              }
+              valueColor={`${config.settings.theme_color}-500`}
+              onValueChange={(value) => {
+                const newSettings = { ...config.settings };
+                newSettings.participant_id = value;
+                setUserSettings(newSettings);
+              }}
+              placeholder="Auto"
+              editable={roomState !== ConnectionState.Connected}
+            />
+            <AttributesInspector
+              attributes={config.settings.attributes || []}
+              onAttributesChange={(newAttributes) => {
+                const newSettings = { ...config.settings };
+                newSettings.attributes = newAttributes;
+                setUserSettings(newSettings);
+              }}
+              metadata={config.settings.metadata}
+              onMetadataChange={(metadata) => {
+                const newSettings = { ...config.settings };
+                newSettings.metadata = metadata;
+                setUserSettings(newSettings);
+              }}
+              themeColor={config.settings.theme_color}
+              disabled={false}
+              connectionState={roomState}
+            />
+          </div>
+        </ConfigurationPanelItem>
+
+        {roomState === ConnectionState.Connected &&
+          config.settings.inputs.screen && (
+            <ConfigurationPanelItem
+              title="Screen"
+              source={Track.Source.ScreenShare}
+            >
+              {localScreenTrack ? (
+                <div className="relative">
+                  <VideoTrack
+                    className="rounded-sm border border-gray-800 opacity-70 w-full"
+                    trackRef={localScreenTrack}
+                  />
+                </div>
+              ) : (
+                <div className="flex items-center justify-center text-gray-700 text-center w-full h-full">
+                  Press the button above to share your screen.
+                </div>
+              )}
+            </ConfigurationPanelItem>
+          )}
+        {roomState === ConnectionState.Connected && voiceAssistant.agent && (
+          <RpcPanel
+            config={config}
+            rpcMethod={rpcMethod}
+            rpcPayload={rpcPayload}
+            setRpcMethod={setRpcMethod}
+            setRpcPayload={setRpcPayload}
+            handleRpcCall={handleRpcCall}
+          />
         )}
         {localCameraTrack && (
-          <ConfigurationPanelItem
-            title="Camera"
-            source={Track.Source.Camera}
-          >
+          <ConfigurationPanelItem title="Camera" source={Track.Source.Camera}>
             <div className="relative">
               <VideoTrack
                 className="rounded-sm border border-gray-800 opacity-70 w-full"
@@ -464,6 +496,8 @@ export default function Playground({
     rpcMethod,
     rpcPayload,
     handleRpcCall,
+    showRpc,
+    setShowRpc,
   ]);
 
   let mobileTabs: PlaygroundTab[] = [];
@@ -549,7 +583,7 @@ export default function Playground({
         >
           {config.settings.outputs.video && (
             <PlaygroundTile
-              title="Video"
+              title="Agent Video"
               className="w-full h-full grow"
               childrenClassName="justify-center"
             >
@@ -558,7 +592,7 @@ export default function Playground({
           )}
           {config.settings.outputs.audio && (
             <PlaygroundTile
-              title="Audio"
+              title="Agent Audio"
               className="w-full h-full grow"
               childrenClassName="justify-center"
             >
diff --git a/src/components/playground/PlaygroundTile.tsx b/src/components/playground/PlaygroundTile.tsx
index dc1769b..e21edcc 100644
--- a/src/components/playground/PlaygroundTile.tsx
+++ b/src/components/playground/PlaygroundTile.tsx
@@ -66,7 +66,7 @@ export const PlaygroundTabbedTile: React.FC<PlaygroundTabbedTileProps> = ({
 }) => {
   const contentPadding = 4;
   const [activeTab, setActiveTab] = useState(initialTab);
-  if(activeTab >= tabs.length) {
+  if (activeTab >= tabs.length) {
     return null;
   }
   return (
diff --git a/src/components/playground/RpcPanel.tsx b/src/components/playground/RpcPanel.tsx
new file mode 100644
index 0000000..45d4ad3
--- /dev/null
+++ b/src/components/playground/RpcPanel.tsx
@@ -0,0 +1,107 @@
+import { ConfigurationPanelItem } from "@/components/config/ConfigurationPanelItem";
+import { useState } from "react";
+import { LoadingSVG } from "@/components/button/LoadingSVG";
+import { Button } from "@/components/button/Button";
+
+interface RpcPanelProps {
+  config: any;
+  rpcMethod: string;
+  rpcPayload: string;
+  setRpcMethod: (method: string) => void;
+  setRpcPayload: (payload: string) => void;
+  handleRpcCall: () => Promise<any>;
+}
+
+export function RpcPanel({
+  config,
+  rpcMethod,
+  rpcPayload,
+  setRpcMethod,
+  setRpcPayload,
+  handleRpcCall,
+}: RpcPanelProps) {
+  const [rpcResult, setRpcResult] = useState<{
+    success: boolean;
+    data: any;
+  } | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleCall = async () => {
+    setIsLoading(true);
+    setRpcResult(null);
+    try {
+      const result = await handleRpcCall();
+      setRpcResult({ success: true, data: result });
+    } catch (error) {
+      setRpcResult({
+        success: false,
+        data: error instanceof Error ? error.message : String(error),
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <ConfigurationPanelItem
+      title="RPC"
+      collapsible={true}
+      defaultCollapsed={true}
+    >
+      <div className="flex flex-col gap-2">
+        <div className="text-xs text-gray-500 mt-2">Method Name</div>
+        <input
+          type="text"
+          value={rpcMethod}
+          onChange={(e) => setRpcMethod(e.target.value)}
+          className="w-full text-white text-sm bg-transparent border border-gray-800 rounded-sm px-3 py-2"
+          placeholder="my_method"
+        />
+
+        <div className="text-xs text-gray-500 mt-2">Payload</div>
+        <textarea
+          value={rpcPayload}
+          onChange={(e) => setRpcPayload(e.target.value)}
+          className="w-full text-white text-sm bg-transparent border border-gray-800 rounded-sm px-3 py-2"
+          placeholder='{"my": "payload"}'
+          rows={2}
+        />
+
+        <Button
+          accentColor={config.settings.theme_color}
+          onClick={handleCall}
+          disabled={!rpcMethod || isLoading}
+          className="mt-2 text-xs flex items-center justify-center gap-2"
+        >
+          {isLoading ? (
+            <>
+              <LoadingSVG diameter={12} strokeWidth={2} />
+              Performing RPC...
+            </>
+          ) : (
+            "Perform RPC"
+          )}
+        </Button>
+
+        {rpcResult && (
+          <>
+            <div className="text-xs text-gray-500 mt-2">
+              {rpcResult.success ? "Result" : "Error"}
+            </div>
+            <div
+              className={`w-full text-sm bg-transparent border rounded-sm px-3 py-2 ${
+                rpcResult.success
+                  ? "border-green-500 text-green-500"
+                  : "border-red-500 text-red-500"
+              }`}
+            >
+              {typeof rpcResult.data === "object"
+                ? JSON.stringify(rpcResult.data, null, 2)
+                : String(rpcResult.data)}
+            </div>
+          </>
+        )}
+      </div>
+    </ConfigurationPanelItem>
+  );
+}
diff --git a/src/components/playground/SettingsDropdown.tsx b/src/components/playground/SettingsDropdown.tsx
index 3fcb943..69484c9 100644
--- a/src/components/playground/SettingsDropdown.tsx
+++ b/src/components/playground/SettingsDropdown.tsx
@@ -2,7 +2,7 @@ import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { CheckIcon, ChevronIcon } from "./icons";
 import { useConfig } from "@/hooks/useConfig";
 
-type SettingType = "inputs" | "outputs" | "chat" | "theme_color"
+type SettingType = "inputs" | "outputs" | "chat" | "theme_color";
 
 type SettingValue = {
   title: string;
@@ -55,18 +55,19 @@ const settingsDropdown: SettingValue[] = [
 ];
 
 export const SettingsDropdown = () => {
-  const {config, setUserSettings} = useConfig();
+  const { config, setUserSettings } = useConfig();
 
   const isEnabled = (setting: SettingValue) => {
-    if (setting.type === "separator" || setting.type === "theme_color") return false;
+    if (setting.type === "separator" || setting.type === "theme_color")
+      return false;
     if (setting.type === "chat") {
       return config.settings[setting.type];
     }
 
-    if(setting.type === "inputs") {
+    if (setting.type === "inputs") {
       const key = setting.key as "camera" | "mic" | "screen";
       return config.settings.inputs[key];
-    } else if(setting.type === "outputs") {
+    } else if (setting.type === "outputs") {
       const key = setting.key as "video" | "audio";
       return config.settings.outputs[key];
     }
@@ -77,13 +78,13 @@ export const SettingsDropdown = () => {
   const toggleSetting = (setting: SettingValue) => {
     if (setting.type === "separator" || setting.type === "theme_color") return;
     const newValue = !isEnabled(setting);
-    const newSettings = {...config.settings}
+    const newSettings = { ...config.settings };
 
-    if(setting.type === "chat") {
+    if (setting.type === "chat") {
       newSettings.chat = newValue;
-    } else if(setting.type === "inputs") {
+    } else if (setting.type === "inputs") {
       newSettings.inputs[setting.key as "camera" | "mic" | "screen"] = newValue;
-    } else if(setting.type === "outputs") {
+    } else if (setting.type === "outputs") {
       newSettings.outputs[setting.key as "video" | "audio"] = newValue;
     }
     setUserSettings(newSettings);
@@ -91,11 +92,9 @@ export const SettingsDropdown = () => {
 
   return (
     <DropdownMenu.Root modal={false}>
-      <DropdownMenu.Trigger className="group inline-flex max-h-12 items-center gap-1 rounded-md hover:bg-gray-800 bg-gray-900 border-gray-800 p-1 pr-2 text-gray-100">
-        <button className="my-auto text-sm flex gap-1 pl-2 py-1 h-full items-center">
-          Settings
-          <ChevronIcon />
-        </button>
+      <DropdownMenu.Trigger className="group inline-flex max-h-12 items-center gap-1 rounded-md hover:bg-gray-800 bg-gray-900 border-gray-800 p-1 pr-2 text-gray-100 my-auto text-sm flex gap-1 pl-2 py-1 h-full items-center">
+        Settings
+        <ChevronIcon />
       </DropdownMenu.Trigger>
       <DropdownMenu.Portal>
         <DropdownMenu.Content
@@ -130,4 +129,4 @@ export const SettingsDropdown = () => {
       </DropdownMenu.Portal>
     </DropdownMenu.Root>
   );
-};
\ No newline at end of file
+};
diff --git a/src/components/toast/PlaygroundToast.tsx b/src/components/toast/PlaygroundToast.tsx
index 8169f9e..8b9a9be 100644
--- a/src/components/toast/PlaygroundToast.tsx
+++ b/src/components/toast/PlaygroundToast.tsx
@@ -13,8 +13,8 @@ export const PlaygroundToast = () => {
     toastMessage?.type === "error"
       ? "red"
       : toastMessage?.type === "success"
-      ? "green"
-      : "amber";
+        ? "green"
+        : "amber";
 
   return (
     <div
diff --git a/src/components/toast/ToasterProvider.tsx b/src/components/toast/ToasterProvider.tsx
index 38aa174..cf120b0 100644
--- a/src/components/toast/ToasterProvider.tsx
+++ b/src/components/toast/ToasterProvider.tsx
@@ -1,29 +1,28 @@
-"use client"
+"use client";
 
 import React, { createContext, useState } from "react";
 import { ToastType } from "./PlaygroundToast";
 
 type ToastProviderData = {
   setToastMessage: (
-    message: { message: string; type: ToastType } | null
+    message: { message: string; type: ToastType } | null,
   ) => void;
   toastMessage: { message: string; type: ToastType } | null;
 };
 
 const ToastContext = createContext<ToastProviderData | undefined>(undefined);
 
-export const ToastProvider = ({
-  children,
-}: {
-  children: React.ReactNode;
-}) => {
-  const [toastMessage, setToastMessage] = useState<{message: string, type: ToastType} | null>(null);
+export const ToastProvider = ({ children }: { children: React.ReactNode }) => {
+  const [toastMessage, setToastMessage] = useState<{
+    message: string;
+    type: ToastType;
+  } | null>(null);
 
   return (
     <ToastContext.Provider
       value={{
         toastMessage,
-        setToastMessage
+        setToastMessage,
       }}
     >
       {children}
@@ -37,4 +36,4 @@ export const useToast = () => {
     throw new Error("useToast must be used within a ToastProvider");
   }
   return context;
-}
\ No newline at end of file
+};
diff --git a/src/hooks/useConfig.tsx b/src/hooks/useConfig.tsx
index 287acd4..35ebdfb 100644
--- a/src/hooks/useConfig.tsx
+++ b/src/hooks/useConfig.tsx
@@ -39,6 +39,7 @@ export type UserSettings = {
   room_name: string;
   participant_id: string;
   participant_name: string;
+  agent_name?: string;
   metadata?: string;
   attributes?: AttributeItem[];
 };
@@ -77,7 +78,7 @@ const useAppConfig = (): AppConfig => {
     if (process.env.NEXT_PUBLIC_APP_CONFIG) {
       try {
         const parsedConfig = jsYaml.load(
-          process.env.NEXT_PUBLIC_APP_CONFIG
+          process.env.NEXT_PUBLIC_APP_CONFIG,
         ) as AppConfig;
         if (parsedConfig.settings === undefined) {
           parsedConfig.settings = defaultConfig.settings;
@@ -105,7 +106,7 @@ export const ConfigProvider = ({ children }: { children: React.ReactNode }) => {
   const appConfig = useAppConfig();
   const router = useRouter();
   const [localColorOverride, setLocalColorOverride] = useState<string | null>(
-    null
+    null,
   );
 
   const getSettingsFromUrl = useCallback(() => {
@@ -168,7 +169,7 @@ export const ConfigProvider = ({ children }: { children: React.ReactNode }) => {
       // Note: We don't set ws_url and token to the URL on purpose
       router.replace("/#" + obj.toString());
     },
-    [router]
+    [router],
   );
 
   const setCookieSettings = useCallback((us: UserSettings) => {
@@ -228,7 +229,7 @@ export const ConfigProvider = ({ children }: { children: React.ReactNode }) => {
         };
       });
     },
-    [appConfig, setCookieSettings, setUrlSettings]
+    [appConfig, setCookieSettings, setUrlSettings],
   );
 
   const [config, _setConfig] = useState<AppConfig>(getConfig());
diff --git a/src/hooks/useConnection.tsx b/src/hooks/useConnection.tsx
index c90dc4a..0222270 100644
--- a/src/hooks/useConnection.tsx
+++ b/src/hooks/useConnection.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import { useCloud } from "@/cloud/useCloud";
 import React, { createContext, useState } from "react";
@@ -6,7 +6,7 @@ import { useCallback } from "react";
 import { useConfig } from "./useConfig";
 import { useToast } from "@/components/toast/ToasterProvider";
 
-export type ConnectionMode = "cloud" | "manual" | "env"
+export type ConnectionMode = "cloud" | "manual" | "env";
 
 type TokenGeneratorData = {
   shouldConnect: boolean;
@@ -17,7 +17,9 @@ type TokenGeneratorData = {
   connect: (mode: ConnectionMode) => Promise<void>;
 };
 
-const ConnectionContext = createContext<TokenGeneratorData | undefined>(undefined);
+const ConnectionContext = createContext<TokenGeneratorData | undefined>(
+  undefined,
+);
 
 export const ConnectionProvider = ({
   children,
@@ -64,17 +66,25 @@ export const ConnectionProvider = ({
         if (config.settings.participant_name) {
           body.participantName = config.settings.participant_name;
         }
+        if (config.settings.agent_name) {
+          body.agentName = config.settings.agent_name;
+        }
         if (config.settings.metadata) {
           body.metadata = config.settings.metadata;
         }
-        const attributesArray = Array.isArray(config.settings.attributes) ? config.settings.attributes : [];
+        const attributesArray = Array.isArray(config.settings.attributes)
+          ? config.settings.attributes
+          : [];
         if (attributesArray?.length) {
-          const attributes = attributesArray.reduce((acc, attr) => {
-            if (attr.key){
-              acc[attr.key] = attr.value;
-            }
-            return acc;
-          }, {} as Record<string, string>);
+          const attributes = attributesArray.reduce(
+            (acc, attr) => {
+              if (attr.key) {
+                acc[attr.key] = attr.value;
+              }
+              return acc;
+            },
+            {} as Record<string, string>,
+          );
           body.attributes = attributes;
         }
         const { accessToken } = await fetch(`/api/token`, {
@@ -83,9 +93,7 @@ export const ConnectionProvider = ({
             "Content-Type": "application/json",
           },
           body: JSON.stringify(body),
-        }).then((res) =>
-          res.json()
-        );
+        }).then((res) => res.json());
         token = accessToken;
       } else {
         token = config.settings.token;
@@ -98,12 +106,14 @@ export const ConnectionProvider = ({
       config.settings.token,
       config.settings.ws_url,
       config.settings.room_name,
+      config.settings.participant_name,
+      config.settings.agent_name,
       config.settings.participant_id,
       config.settings.metadata,
       config.settings.attributes,
       generateToken,
       setToastMessage,
-    ]
+    ],
   );
 
   const disconnect = useCallback(async () => {
@@ -132,4 +142,4 @@ export const useConnection = () => {
     throw new Error("useConnection must be used within a ConnectionProvider");
   }
   return context;
-}
\ No newline at end of file
+};
diff --git a/src/hooks/useTrackVolume.tsx b/src/hooks/useTrackVolume.tsx
index 555eadd..4798c8d 100644
--- a/src/hooks/useTrackVolume.tsx
+++ b/src/hooks/useTrackVolume.tsx
@@ -62,7 +62,7 @@ export const useMultibandTrackVolume = (
   track?: Track,
   bands: number = 5,
   loPass: number = 100,
-  hiPass: number = 600
+  hiPass: number = 600,
 ) => {
   const [frequencyBands, setFrequencyBands] = useState<Float32Array[]>([]);
 
@@ -93,7 +93,7 @@ export const useMultibandTrackVolume = (
       const chunks: Float32Array[] = [];
       for (let i = 0; i < bands; i++) {
         chunks.push(
-          normalizedFrequencies.slice(i * chunkSize, (i + 1) * chunkSize)
+          normalizedFrequencies.slice(i * chunkSize, (i + 1) * chunkSize),
         );
       }
 
diff --git a/src/lib/types.ts b/src/lib/types.ts
index ad57992..52d662f 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -19,4 +19,4 @@ export interface AttributeItem {
   id: string;
   key: string;
   value: string;
-}
\ No newline at end of file
+}
diff --git a/src/pages/api/token.ts b/src/pages/api/token.ts
index d69a3f5..46cfc7f 100644
--- a/src/pages/api/token.ts
+++ b/src/pages/api/token.ts
@@ -2,21 +2,36 @@ import { NextApiRequest, NextApiResponse } from "next";
 import { generateRandomAlphanumeric } from "@/lib/util";
 
 import { AccessToken } from "livekit-server-sdk";
+import { RoomAgentDispatch, RoomConfiguration } from "@livekit/protocol";
 import type { AccessTokenOptions, VideoGrant } from "livekit-server-sdk";
 import { TokenResult } from "../../lib/types";
 
 const apiKey = process.env.LIVEKIT_API_KEY;
 const apiSecret = process.env.LIVEKIT_API_SECRET;
 
-const createToken = (userInfo: AccessTokenOptions, grant: VideoGrant) => {
+const createToken = (
+  userInfo: AccessTokenOptions,
+  grant: VideoGrant,
+  agentName?: string,
+) => {
   const at = new AccessToken(apiKey, apiSecret, userInfo);
   at.addGrant(grant);
+  if (agentName) {
+    at.roomConfig = new RoomConfiguration({
+      agents: [
+        new RoomAgentDispatch({
+          agentName: agentName,
+          metadata: '{"user_id": "12345"}',
+        }),
+      ],
+    });
+  }
   return at.toJwt();
 };
 
 export default async function handleToken(
   req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ) {
   try {
     if (req.method !== "POST") {
@@ -32,34 +47,47 @@ export default async function handleToken(
 
     const {
       roomName: roomNameFromBody,
-      participantName,
+      participantName: participantNameFromBody,
       participantId: participantIdFromBody,
       metadata: metadataFromBody,
       attributes: attributesFromBody,
+      agentName: agentNameFromBody,
     } = req.body;
 
     // Get room name from query params or generate random one
-    const roomName = roomNameFromBody as string ||
+    const roomName =
+      (roomNameFromBody as string) ||
       `room-${generateRandomAlphanumeric(4)}-${generateRandomAlphanumeric(4)}`;
 
     // Get participant name from query params or generate random one
-    const identity = participantIdFromBody as string ||
+    const identity =
+      (participantIdFromBody as string) ||
       `identity-${generateRandomAlphanumeric(4)}`;
 
+    // Get agent name from query params or use none (automatic dispatch)
+    const agentName = (agentNameFromBody as string) || undefined;
+
     // Get metadata and attributes from query params
     const metadata = metadataFromBody as string | undefined;
     const attributesStr = attributesFromBody as string | undefined;
     const attributes = attributesStr || {};
 
+    const participantName = participantNameFromBody || identity;
+
     const grant: VideoGrant = {
       room: roomName,
       roomJoin: true,
       canPublish: true,
       canPublishData: true,
       canSubscribe: true,
+      canUpdateOwnMetadata: true,
     };
 
-    const token = await createToken({ identity, metadata, attributes, name: participantName }, grant);
+    const token = await createToken(
+      { identity, metadata, attributes, name: participantName },
+      grant,
+      agentName,
+    );
     const result: TokenResult = {
       identity,
       accessToken: token,
@@ -70,4 +98,4 @@ export default async function handleToken(
     res.statusMessage = (e as Error).message;
     res.status(500).end();
   }
-}
\ No newline at end of file
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 9243af0..3aa2822 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -12,7 +12,11 @@ import { PlaygroundConnect } from "@/components/PlaygroundConnect";
 import Playground from "@/components/playground/Playground";
 import { PlaygroundToast, ToastType } from "@/components/toast/PlaygroundToast";
 import { ConfigProvider, useConfig } from "@/hooks/useConfig";
-import { ConnectionMode, ConnectionProvider, useConnection } from "@/hooks/useConnection";
+import {
+  ConnectionMode,
+  ConnectionProvider,
+  useConnection,
+} from "@/hooks/useConnection";
 import { useMemo } from "react";
 import { ToastProvider, useToast } from "@/components/toast/ToasterProvider";
 
@@ -44,26 +48,26 @@ export default function Home() {
 export function HomeInner() {
   const { shouldConnect, wsUrl, token, mode, connect, disconnect } =
     useConnection();
-  
-  const {config} = useConfig();
+
+  const { config } = useConfig();
   const { toastMessage, setToastMessage } = useToast();
 
   const handleConnect = useCallback(
     async (c: boolean, mode: ConnectionMode) => {
       c ? connect(mode) : disconnect();
     },
-    [connect, disconnect]
+    [connect, disconnect],
   );
 
   const showPG = useMemo(() => {
     if (process.env.NEXT_PUBLIC_LIVEKIT_URL) {
       return true;
     }
-    if(wsUrl) {
+    if (wsUrl) {
       return true;
     }
     return false;
-  }, [wsUrl])
+  }, [wsUrl]);
 
   return (
     <>
@@ -129,4 +133,4 @@ export function HomeInner() {
       </main>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/src/transcriptions/TranscriptionTile.tsx b/src/transcriptions/TranscriptionTile.tsx
index a0b35b9..73dbb6e 100644
--- a/src/transcriptions/TranscriptionTile.tsx
+++ b/src/transcriptions/TranscriptionTile.tsx
@@ -29,7 +29,7 @@ export function TranscriptionTile({
   });
 
   const [transcripts, setTranscripts] = useState<Map<string, ChatMessageType>>(
-    new Map()
+    new Map(),
   );
   const [messages, setMessages] = useState<ChatMessageType[]>([]);
   const { chatMessages, send: sendChat } = useChat();
@@ -43,21 +43,21 @@ export function TranscriptionTile({
           segmentToChatMessage(
             s,
             transcripts.get(s.id),
-            agentAudioTrack.participant
-          )
-        )
+            agentAudioTrack.participant,
+          ),
+        ),
       );
     }
-    
+
     localMessages.segments.forEach((s) =>
       transcripts.set(
         s.id,
         segmentToChatMessage(
           s,
           transcripts.get(s.id),
-          localParticipant.localParticipant
-        )
-      )
+          localParticipant.localParticipant,
+        ),
+      ),
     );
 
     const allMessages = Array.from(transcripts.values());
@@ -104,7 +104,7 @@ export function TranscriptionTile({
 function segmentToChatMessage(
   s: TranscriptionSegment,
   existingMessage: ChatMessageType | undefined,
-  participant: Participant
+  participant: Participant,
 ): ChatMessageType {
   const msg: ChatMessageType = {
     message: s.final ? s.text : `${s.text} ...`,
diff --git a/tailwind.config.js b/tailwind.config.js
index ac39103..321df87 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,9 +1,42 @@
 /** @type {import('tailwindcss').Config} */
 
-const colors = require('tailwindcss/colors')
-const shades = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'];
-const colorList = ['gray', 'green', 'cyan', 'amber', 'violet', 'blue', 'rose', 'pink', 'teal', "red"];
-const uiElements = ['bg', 'selection:bg', 'border', 'text', 'hover:bg', 'hover:border', 'hover:text', 'ring', 'focus:ring'];
+const colors = require("tailwindcss/colors");
+const shades = [
+  "50",
+  "100",
+  "200",
+  "300",
+  "400",
+  "500",
+  "600",
+  "700",
+  "800",
+  "900",
+  "950",
+];
+const colorList = [
+  "gray",
+  "green",
+  "cyan",
+  "amber",
+  "violet",
+  "blue",
+  "rose",
+  "pink",
+  "teal",
+  "red",
+];
+const uiElements = [
+  "bg",
+  "selection:bg",
+  "border",
+  "text",
+  "hover:bg",
+  "hover:border",
+  "hover:text",
+  "ring",
+  "focus:ring",
+];
 const customColors = {
   cyan: colors.cyan,
   green: colors.green,
@@ -32,44 +65,51 @@ for (const [name, color] of Object.entries(customColors)) {
 }
 
 const safelist = [
-  'bg-black',
-  'bg-white',
-  'transparent',
-  'object-cover',
-  'object-contain',
+  "bg-black",
+  "bg-white",
+  "transparent",
+  "object-cover",
+  "object-contain",
   ...shadowNames,
   ...textShadowNames,
-  ...shades.flatMap(shade => [
-    ...colorList.flatMap(color => [
-      ...uiElements.flatMap(element => [
-        `${element}-${color}-${shade}`,
-      ]),
+  ...shades.flatMap((shade) => [
+    ...colorList.flatMap((color) => [
+      ...uiElements.flatMap((element) => [`${element}-${color}-${shade}`]),
     ]),
   ]),
 ];
 
 module.exports = {
-  content: [
-    "./src/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
+  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
   theme: {
     colors: {
-      transparent: 'transparent',
-      current: 'currentColor',
+      transparent: "transparent",
+      current: "currentColor",
       black: colors.black,
       white: colors.white,
       gray: colors.neutral,
-      ...customColors
+      ...customColors,
     },
     extend: {
       dropShadow: {
-       ...textShadows,
+        ...textShadows,
       },
       boxShadow: {
         ...customShadows,
-      }
-    }
+      },
+      keyframes: {
+        "fade-in-out": {
+          "0%": { opacity: "0" },
+          "20%": { opacity: "1" },
+          "80%": { opacity: "1" },
+          "100%": { opacity: "0" },
+        },
+      },
+      animation: {
+        "fade-in-out": "fade-in-out 1s ease-in-out",
+      },
+    },
   },
   plugins: [],
   safelist,
-};
\ No newline at end of file
+};