fix(frontend): minor copilot UI fixes

Bumps the production-dependencies group in /autogpt_platform/backend
with 2 updates: [fastapi](https://github.com/fastapi/fastapi) and
[langfuse](https://github.com/langfuse/langfuse).

Updates `fastapi` from 0.128.5 to 0.128.6
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/fastapi/fastapi/releases">fastapi's
releases</a>.</em></p>
<blockquote>
<h2>0.128.6</h2>
<h3>Fixes</h3>
<ul>
<li>🐛 Fix <code>on_startup</code> and <code>on_shutdown</code>
parameters of <code>APIRouter</code>. PR <a
href="https://redirect.github.com/fastapi/fastapi/pull/14873">#14873</a>
by <a
href="https://github.com/YuriiMotov"><code>@​YuriiMotov</code></a>.</li>
</ul>
<h3>Translations</h3>
<ul>
<li>🌐 Update translations for zh (update-outdated). PR <a
href="https://redirect.github.com/fastapi/fastapi/pull/14843">#14843</a>
by <a
href="https://github.com/tiangolo"><code>@​tiangolo</code></a>.</li>
</ul>
<h3>Internal</h3>
<ul>
<li>✅ Fix parameterized tests with snapshots. PR <a
href="https://redirect.github.com/fastapi/fastapi/pull/14875">#14875</a>
by <a
href="https://github.com/YuriiMotov"><code>@​YuriiMotov</code></a>.</li>
</ul>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="fbca586c1d"><code>fbca586</code></a>
📝 Update release notes</li>
<li><a
href="4e879799dd"><code>4e87979</code></a>
📝 Update release notes</li>
<li><a
href="0a4033aeee"><code>0a4033a</code></a>
🔖 Release version 0.128.6</li>
<li><a
href="ed2512a5ec"><code>ed2512a</code></a>
🐛 Fix <code>on_startup</code> and <code>on_shutdown</code> parameters of
<code>APIRouter</code> (<a
href="https://redirect.github.com/fastapi/fastapi/issues/14873">#14873</a>)</li>
<li><a
href="0c0f6332e2"><code>0c0f633</code></a>
📝 Update release notes</li>
<li><a
href="227cb85a03"><code>227cb85</code></a>
✅ Fix parameterized tests with snapshots (<a
href="https://redirect.github.com/fastapi/fastapi/issues/14875">#14875</a>)</li>
<li><a
href="cd31576d57"><code>cd31576</code></a>
📝 Update release notes</li>
<li><a
href="376e108580"><code>376e108</code></a>
🌐 Update translations for zh (update-outdated) (<a
href="https://redirect.github.com/fastapi/fastapi/issues/14843">#14843</a>)</li>
<li>See full diff in <a
href="https://github.com/fastapi/fastapi/compare/0.128.5...0.128.6">compare
view</a></li>
</ul>
</details>
<br />

Updates `langfuse` from 3.13.0 to 3.14.1
<details>
<summary>Commits</summary>
<ul>
<li>See full diff in <a
href="https://github.com/langfuse/langfuse/commits">compare
view</a></li>
</ul>
</details>
<br />


Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore <dependency name> major version` will close this
group update PR and stop Dependabot creating any more for the specific
dependency's major version (unless you unignore this specific
dependency's major version or upgrade to it yourself)
- `@dependabot ignore <dependency name> minor version` will close this
group update PR and stop Dependabot creating any more for the specific
dependency's minor version (unless you unignore this specific
dependency's minor version or upgrade to it yourself)
- `@dependabot ignore <dependency name>` will close this group update PR
and stop Dependabot creating any more for the specific dependency
(unless you unignore this specific dependency or upgrade to it yourself)
- `@dependabot unignore <dependency name>` will remove all of the ignore
conditions of the specified dependency
- `@dependabot unignore <dependency name> <ignore condition>` will
remove the ignore condition of the specified dependency and ignore
conditions


</details>

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Zamil Majdy <zamil.majdy@agpt.co>
Co-authored-by: Otto <otto@agpt.co>

.github/workflows/platform-fullstack-ci.yml

@@ -56,7 +56,7 @@ jobs:
         run: pnpm install --frozen-lockfile
 
   types:
-    runs-on: ubuntu-latest
+    runs-on: big-boi
     needs: setup
     strategy:
       fail-fast: false
@@ -85,7 +85,7 @@ jobs:
 
       - name: Run docker compose
         run: |
-          docker compose -f ../docker-compose.yml --profile local --profile deps_backend up -d
+          docker compose -f ../docker-compose.yml --profile local up -d deps_backend
 
       - name: Restore dependencies cache
         uses: actions/cache@v5

autogpt_platform/autogpt_libs/poetry.lock

@@ -1,4 +1,4 @@
-# This file is automatically @generated by Poetry 2.2.1 and should not be changed by hand.
+# This file is automatically @generated by Poetry 2.1.1 and should not be changed by hand.
 
 [[package]]
 name = "annotated-doc"
@@ -67,7 +67,7 @@ description = "Backport of asyncio.Runner, a context manager that controls event
 optional = false
 python-versions = "<3.11,>=3.8"
 groups = ["dev"]
-markers = "python_version == \"3.10\""
+markers = "python_version < \"3.11\""
 files = [
     {file = "backports_asyncio_runner-1.2.0-py3-none-any.whl", hash = "sha256:0da0a936a8aeb554eccb426dc55af3ba63bcdc69fa1a600b5bb305413a4477b5"},
     {file = "backports_asyncio_runner-1.2.0.tar.gz", hash = "sha256:a5aa7b2b7d8f8bfcaa2b57313f70792df84e32a2a746f585213373f900b42162"},
@@ -326,100 +326,118 @@ files = [
 
 [[package]]
 name = "coverage"
-version = "7.10.5"
+version = "7.13.4"
 description = "Code coverage measurement for Python"
 optional = false
-python-versions = ">=3.9"
+python-versions = ">=3.10"
 groups = ["dev"]
 files = [
-    {file = "coverage-7.10.5-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:c6a5c3414bfc7451b879141ce772c546985163cf553f08e0f135f0699a911801"},
-    {file = "coverage-7.10.5-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:bc8e4d99ce82f1710cc3c125adc30fd1487d3cf6c2cd4994d78d68a47b16989a"},
-    {file = "coverage-7.10.5-cp310-cp310-manylinux1_i686.manylinux_2_28_i686.manylinux_2_5_i686.whl", hash = "sha256:02252dc1216e512a9311f596b3169fad54abcb13827a8d76d5630c798a50a754"},
-    {file = "coverage-7.10.5-cp310-cp310-manylinux1_x86_64.manylinux_2_28_x86_64.manylinux_2_5_x86_64.whl", hash = "sha256:73269df37883e02d460bee0cc16be90509faea1e3bd105d77360b512d5bb9c33"},
-    {file = "coverage-7.10.5-cp310-cp310-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:1f8a81b0614642f91c9effd53eec284f965577591f51f547a1cbeb32035b4c2f"},
-    {file = "coverage-7.10.5-cp310-cp310-musllinux_1_2_aarch64.whl", hash = "sha256:6a29f8e0adb7f8c2b95fa2d4566a1d6e6722e0a637634c6563cb1ab844427dd9"},
-    {file = "coverage-7.10.5-cp310-cp310-musllinux_1_2_i686.whl", hash = "sha256:fcf6ab569436b4a647d4e91accba12509ad9f2554bc93d3aee23cc596e7f99c3"},
-    {file = "coverage-7.10.5-cp310-cp310-musllinux_1_2_x86_64.whl", hash = "sha256:90dc3d6fb222b194a5de60af8d190bedeeddcbc7add317e4a3cd333ee6b7c879"},
-    {file = "coverage-7.10.5-cp310-cp310-win32.whl", hash = "sha256:414a568cd545f9dc75f0686a0049393de8098414b58ea071e03395505b73d7a8"},
-    {file = "coverage-7.10.5-cp310-cp310-win_amd64.whl", hash = "sha256:e551f9d03347196271935fd3c0c165f0e8c049220280c1120de0084d65e9c7ff"},
-    {file = "coverage-7.10.5-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:c177e6ffe2ebc7c410785307758ee21258aa8e8092b44d09a2da767834f075f2"},
-    {file = "coverage-7.10.5-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:14d6071c51ad0f703d6440827eaa46386169b5fdced42631d5a5ac419616046f"},
-    {file = "coverage-7.10.5-cp311-cp311-manylinux1_i686.manylinux_2_28_i686.manylinux_2_5_i686.whl", hash = "sha256:61f78c7c3bc272a410c5ae3fde7792b4ffb4acc03d35a7df73ca8978826bb7ab"},
-    {file = "coverage-7.10.5-cp311-cp311-manylinux1_x86_64.manylinux_2_28_x86_64.manylinux_2_5_x86_64.whl", hash = "sha256:f39071caa126f69d63f99b324fb08c7b1da2ec28cbb1fe7b5b1799926492f65c"},
-    {file = "coverage-7.10.5-cp311-cp311-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:343a023193f04d46edc46b2616cdbee68c94dd10208ecd3adc56fcc54ef2baa1"},
-    {file = "coverage-7.10.5-cp311-cp311-musllinux_1_2_aarch64.whl", hash = "sha256:585ffe93ae5894d1ebdee69fc0b0d4b7c75d8007983692fb300ac98eed146f78"},
-    {file = "coverage-7.10.5-cp311-cp311-musllinux_1_2_i686.whl", hash = "sha256:b0ef4e66f006ed181df29b59921bd8fc7ed7cd6a9289295cd8b2824b49b570df"},
-    {file = "coverage-7.10.5-cp311-cp311-musllinux_1_2_x86_64.whl", hash = "sha256:eb7b0bbf7cc1d0453b843eca7b5fa017874735bef9bfdfa4121373d2cc885ed6"},
-    {file = "coverage-7.10.5-cp311-cp311-win32.whl", hash = "sha256:1d043a8a06987cc0c98516e57c4d3fc2c1591364831e9deb59c9e1b4937e8caf"},
-    {file = "coverage-7.10.5-cp311-cp311-win_amd64.whl", hash = "sha256:fefafcca09c3ac56372ef64a40f5fe17c5592fab906e0fdffd09543f3012ba50"},
-    {file = "coverage-7.10.5-cp311-cp311-win_arm64.whl", hash = "sha256:7e78b767da8b5fc5b2faa69bb001edafcd6f3995b42a331c53ef9572c55ceb82"},
-    {file = "coverage-7.10.5-cp312-cp312-macosx_10_13_x86_64.whl", hash = "sha256:c2d05c7e73c60a4cecc7d9b60dbfd603b4ebc0adafaef371445b47d0f805c8a9"},
-    {file = "coverage-7.10.5-cp312-cp312-macosx_11_0_arm64.whl", hash = "sha256:32ddaa3b2c509778ed5373b177eb2bf5662405493baeff52278a0b4f9415188b"},
-    {file = "coverage-7.10.5-cp312-cp312-manylinux1_i686.manylinux_2_28_i686.manylinux_2_5_i686.whl", hash = "sha256:dd382410039fe062097aa0292ab6335a3f1e7af7bba2ef8d27dcda484918f20c"},
-    {file = "coverage-7.10.5-cp312-cp312-manylinux1_x86_64.manylinux_2_28_x86_64.manylinux_2_5_x86_64.whl", hash = "sha256:7fa22800f3908df31cea6fb230f20ac49e343515d968cc3a42b30d5c3ebf9b5a"},
-    {file = "coverage-7.10.5-cp312-cp312-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:f366a57ac81f5e12797136552f5b7502fa053c861a009b91b80ed51f2ce651c6"},
-    {file = "coverage-7.10.5-cp312-cp312-musllinux_1_2_aarch64.whl", hash = "sha256:5f1dc8f1980a272ad4a6c84cba7981792344dad33bf5869361576b7aef42733a"},
-    {file = "coverage-7.10.5-cp312-cp312-musllinux_1_2_i686.whl", hash = "sha256:2285c04ee8676f7938b02b4936d9b9b672064daab3187c20f73a55f3d70e6b4a"},
-    {file = "coverage-7.10.5-cp312-cp312-musllinux_1_2_x86_64.whl", hash = "sha256:c2492e4dd9daab63f5f56286f8a04c51323d237631eb98505d87e4c4ff19ec34"},
-    {file = "coverage-7.10.5-cp312-cp312-win32.whl", hash = "sha256:38a9109c4ee8135d5df5505384fc2f20287a47ccbe0b3f04c53c9a1989c2bbaf"},
-    {file = "coverage-7.10.5-cp312-cp312-win_amd64.whl", hash = "sha256:6b87f1ad60b30bc3c43c66afa7db6b22a3109902e28c5094957626a0143a001f"},
-    {file = "coverage-7.10.5-cp312-cp312-win_arm64.whl", hash = "sha256:672a6c1da5aea6c629819a0e1461e89d244f78d7b60c424ecf4f1f2556c041d8"},
-    {file = "coverage-7.10.5-cp313-cp313-macosx_10_13_x86_64.whl", hash = "sha256:ef3b83594d933020f54cf65ea1f4405d1f4e41a009c46df629dd964fcb6e907c"},
-    {file = "coverage-7.10.5-cp313-cp313-macosx_11_0_arm64.whl", hash = "sha256:2b96bfdf7c0ea9faebce088a3ecb2382819da4fbc05c7b80040dbc428df6af44"},
-    {file = "coverage-7.10.5-cp313-cp313-manylinux1_i686.manylinux_2_28_i686.manylinux_2_5_i686.whl", hash = "sha256:63df1fdaffa42d914d5c4d293e838937638bf75c794cf20bee12978fc8c4e3bc"},
-    {file = "coverage-7.10.5-cp313-cp313-manylinux1_x86_64.manylinux_2_28_x86_64.manylinux_2_5_x86_64.whl", hash = "sha256:8002dc6a049aac0e81ecec97abfb08c01ef0c1fbf962d0c98da3950ace89b869"},
-    {file = "coverage-7.10.5-cp313-cp313-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:63d4bb2966d6f5f705a6b0c6784c8969c468dbc4bcf9d9ded8bff1c7e092451f"},
-    {file = "coverage-7.10.5-cp313-cp313-musllinux_1_2_aarch64.whl", hash = "sha256:1f672efc0731a6846b157389b6e6d5d5e9e59d1d1a23a5c66a99fd58339914d5"},
-    {file = "coverage-7.10.5-cp313-cp313-musllinux_1_2_i686.whl", hash = "sha256:3f39cef43d08049e8afc1fde4a5da8510fc6be843f8dea350ee46e2a26b2f54c"},
-    {file = "coverage-7.10.5-cp313-cp313-musllinux_1_2_x86_64.whl", hash = "sha256:2968647e3ed5a6c019a419264386b013979ff1fb67dd11f5c9886c43d6a31fc2"},
-    {file = "coverage-7.10.5-cp313-cp313-win32.whl", hash = "sha256:0d511dda38595b2b6934c2b730a1fd57a3635c6aa2a04cb74714cdfdd53846f4"},
-    {file = "coverage-7.10.5-cp313-cp313-win_amd64.whl", hash = "sha256:9a86281794a393513cf117177fd39c796b3f8e3759bb2764259a2abba5cce54b"},
-    {file = "coverage-7.10.5-cp313-cp313-win_arm64.whl", hash = "sha256:cebd8e906eb98bb09c10d1feed16096700b1198d482267f8bf0474e63a7b8d84"},
-    {file = "coverage-7.10.5-cp313-cp313t-macosx_10_13_x86_64.whl", hash = "sha256:0520dff502da5e09d0d20781df74d8189ab334a1e40d5bafe2efaa4158e2d9e7"},
-    {file = "coverage-7.10.5-cp313-cp313t-macosx_11_0_arm64.whl", hash = "sha256:d9cd64aca68f503ed3f1f18c7c9174cbb797baba02ca8ab5112f9d1c0328cd4b"},
-    {file = "coverage-7.10.5-cp313-cp313t-manylinux1_i686.manylinux_2_28_i686.manylinux_2_5_i686.whl", hash = "sha256:0913dd1613a33b13c4f84aa6e3f4198c1a21ee28ccb4f674985c1f22109f0aae"},
-    {file = "coverage-7.10.5-cp313-cp313t-manylinux1_x86_64.manylinux_2_28_x86_64.manylinux_2_5_x86_64.whl", hash = "sha256:1b7181c0feeb06ed8a02da02792f42f829a7b29990fef52eff257fef0885d760"},
-    {file = "coverage-7.10.5-cp313-cp313t-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:36d42b7396b605f774d4372dd9c49bed71cbabce4ae1ccd074d155709dd8f235"},
-    {file = "coverage-7.10.5-cp313-cp313t-musllinux_1_2_aarch64.whl", hash = "sha256:b4fdc777e05c4940b297bf47bf7eedd56a39a61dc23ba798e4b830d585486ca5"},
-    {file = "coverage-7.10.5-cp313-cp313t-musllinux_1_2_i686.whl", hash = "sha256:42144e8e346de44a6f1dbd0a56575dd8ab8dfa7e9007da02ea5b1c30ab33a7db"},
-    {file = "coverage-7.10.5-cp313-cp313t-musllinux_1_2_x86_64.whl", hash = "sha256:66c644cbd7aed8fe266d5917e2c9f65458a51cfe5eeff9c05f15b335f697066e"},
-    {file = "coverage-7.10.5-cp313-cp313t-win32.whl", hash = "sha256:2d1b73023854068c44b0c554578a4e1ef1b050ed07cf8b431549e624a29a66ee"},
-    {file = "coverage-7.10.5-cp313-cp313t-win_amd64.whl", hash = "sha256:54a1532c8a642d8cc0bd5a9a51f5a9dcc440294fd06e9dda55e743c5ec1a8f14"},
-    {file = "coverage-7.10.5-cp313-cp313t-win_arm64.whl", hash = "sha256:74d5b63fe3f5f5d372253a4ef92492c11a4305f3550631beaa432fc9df16fcff"},
-    {file = "coverage-7.10.5-cp314-cp314-macosx_10_13_x86_64.whl", hash = "sha256:68c5e0bc5f44f68053369fa0d94459c84548a77660a5f2561c5e5f1e3bed7031"},
-    {file = "coverage-7.10.5-cp314-cp314-macosx_11_0_arm64.whl", hash = "sha256:cf33134ffae93865e32e1e37df043bef15a5e857d8caebc0099d225c579b0fa3"},
-    {file = "coverage-7.10.5-cp314-cp314-manylinux1_i686.manylinux_2_28_i686.manylinux_2_5_i686.whl", hash = "sha256:ad8fa9d5193bafcf668231294241302b5e683a0518bf1e33a9a0dfb142ec3031"},
-    {file = "coverage-7.10.5-cp314-cp314-manylinux1_x86_64.manylinux_2_28_x86_64.manylinux_2_5_x86_64.whl", hash = "sha256:146fa1531973d38ab4b689bc764592fe6c2f913e7e80a39e7eeafd11f0ef6db2"},
-    {file = "coverage-7.10.5-cp314-cp314-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:6013a37b8a4854c478d3219ee8bc2392dea51602dd0803a12d6f6182a0061762"},
-    {file = "coverage-7.10.5-cp314-cp314-musllinux_1_2_aarch64.whl", hash = "sha256:eb90fe20db9c3d930fa2ad7a308207ab5b86bf6a76f54ab6a40be4012d88fcae"},
-    {file = "coverage-7.10.5-cp314-cp314-musllinux_1_2_i686.whl", hash = "sha256:384b34482272e960c438703cafe63316dfbea124ac62006a455c8410bf2a2262"},
-    {file = "coverage-7.10.5-cp314-cp314-musllinux_1_2_x86_64.whl", hash = "sha256:467dc74bd0a1a7de2bedf8deaf6811f43602cb532bd34d81ffd6038d6d8abe99"},
-    {file = "coverage-7.10.5-cp314-cp314-win32.whl", hash = "sha256:556d23d4e6393ca898b2e63a5bca91e9ac2d5fb13299ec286cd69a09a7187fde"},
-    {file = "coverage-7.10.5-cp314-cp314-win_amd64.whl", hash = "sha256:f4446a9547681533c8fa3e3c6cf62121eeee616e6a92bd9201c6edd91beffe13"},
-    {file = "coverage-7.10.5-cp314-cp314-win_arm64.whl", hash = "sha256:5e78bd9cf65da4c303bf663de0d73bf69f81e878bf72a94e9af67137c69b9fe9"},
-    {file = "coverage-7.10.5-cp314-cp314t-macosx_10_13_x86_64.whl", hash = "sha256:5661bf987d91ec756a47c7e5df4fbcb949f39e32f9334ccd3f43233bbb65e508"},
-    {file = "coverage-7.10.5-cp314-cp314t-macosx_11_0_arm64.whl", hash = "sha256:a46473129244db42a720439a26984f8c6f834762fc4573616c1f37f13994b357"},
-    {file = "coverage-7.10.5-cp314-cp314t-manylinux1_i686.manylinux_2_28_i686.manylinux_2_5_i686.whl", hash = "sha256:1f64b8d3415d60f24b058b58d859e9512624bdfa57a2d1f8aff93c1ec45c429b"},
-    {file = "coverage-7.10.5-cp314-cp314t-manylinux1_x86_64.manylinux_2_28_x86_64.manylinux_2_5_x86_64.whl", hash = "sha256:44d43de99a9d90b20e0163f9770542357f58860a26e24dc1d924643bd6aa7cb4"},
-    {file = "coverage-7.10.5-cp314-cp314t-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:a931a87e5ddb6b6404e65443b742cb1c14959622777f2a4efd81fba84f5d91ba"},
-    {file = "coverage-7.10.5-cp314-cp314t-musllinux_1_2_aarch64.whl", hash = "sha256:f9559b906a100029274448f4c8b8b0a127daa4dade5661dfd821b8c188058842"},
-    {file = "coverage-7.10.5-cp314-cp314t-musllinux_1_2_i686.whl", hash = "sha256:b08801e25e3b4526ef9ced1aa29344131a8f5213c60c03c18fe4c6170ffa2874"},
-    {file = "coverage-7.10.5-cp314-cp314t-musllinux_1_2_x86_64.whl", hash = "sha256:ed9749bb8eda35f8b636fb7632f1c62f735a236a5d4edadd8bbcc5ea0542e732"},
-    {file = "coverage-7.10.5-cp314-cp314t-win32.whl", hash = "sha256:609b60d123fc2cc63ccee6d17e4676699075db72d14ac3c107cc4976d516f2df"},
-    {file = "coverage-7.10.5-cp314-cp314t-win_amd64.whl", hash = "sha256:0666cf3d2c1626b5a3463fd5b05f5e21f99e6aec40a3192eee4d07a15970b07f"},
-    {file = "coverage-7.10.5-cp314-cp314t-win_arm64.whl", hash = "sha256:bc85eb2d35e760120540afddd3044a5bf69118a91a296a8b3940dfc4fdcfe1e2"},
-    {file = "coverage-7.10.5-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:62835c1b00c4a4ace24c1a88561a5a59b612fbb83a525d1c70ff5720c97c0610"},
-    {file = "coverage-7.10.5-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:5255b3bbcc1d32a4069d6403820ac8e6dbcc1d68cb28a60a1ebf17e47028e898"},
-    {file = "coverage-7.10.5-cp39-cp39-manylinux1_i686.manylinux_2_28_i686.manylinux_2_5_i686.whl", hash = "sha256:3876385722e335d6e991c430302c24251ef9c2a9701b2b390f5473199b1b8ebf"},
-    {file = "coverage-7.10.5-cp39-cp39-manylinux1_x86_64.manylinux_2_28_x86_64.manylinux_2_5_x86_64.whl", hash = "sha256:8048ce4b149c93447a55d279078c8ae98b08a6951a3c4d2d7e87f4efc7bfe100"},
-    {file = "coverage-7.10.5-cp39-cp39-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:4028e7558e268dd8bcf4d9484aad393cafa654c24b4885f6f9474bf53183a82a"},
-    {file = "coverage-7.10.5-cp39-cp39-musllinux_1_2_aarch64.whl", hash = "sha256:03f47dc870eec0367fcdd603ca6a01517d2504e83dc18dbfafae37faec66129a"},
-    {file = "coverage-7.10.5-cp39-cp39-musllinux_1_2_i686.whl", hash = "sha256:2d488d7d42b6ded7ea0704884f89dcabd2619505457de8fc9a6011c62106f6e5"},
-    {file = "coverage-7.10.5-cp39-cp39-musllinux_1_2_x86_64.whl", hash = "sha256:b3dcf2ead47fa8be14224ee817dfc1df98043af568fe120a22f81c0eb3c34ad2"},
-    {file = "coverage-7.10.5-cp39-cp39-win32.whl", hash = "sha256:02650a11324b80057b8c9c29487020073d5e98a498f1857f37e3f9b6ea1b2426"},
-    {file = "coverage-7.10.5-cp39-cp39-win_amd64.whl", hash = "sha256:b45264dd450a10f9e03237b41a9a24e85cbb1e278e5a32adb1a303f58f0017f3"},
-    {file = "coverage-7.10.5-py3-none-any.whl", hash = "sha256:0be24d35e4db1d23d0db5c0f6a74a962e2ec83c426b5cac09f4234aadef38e4a"},
-    {file = "coverage-7.10.5.tar.gz", hash = "sha256:f2e57716a78bc3ae80b2207be0709a3b2b63b9f2dcf9740ee6ac03588a2015b6"},
+    {file = "coverage-7.13.4-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:0fc31c787a84f8cd6027eba44010517020e0d18487064cd3d8968941856d1415"},
+    {file = "coverage-7.13.4-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:a32ebc02a1805adf637fc8dec324b5cdacd2e493515424f70ee33799573d661b"},
+    {file = "coverage-7.13.4-cp310-cp310-manylinux1_i686.manylinux_2_28_i686.manylinux_2_5_i686.whl", hash = "sha256:e24f9156097ff9dc286f2f913df3a7f63c0e333dcafa3c196f2c18b4175ca09a"},
+    {file = "coverage-7.13.4-cp310-cp310-manylinux1_x86_64.manylinux_2_28_x86_64.manylinux_2_5_x86_64.whl", hash = "sha256:8041b6c5bfdc03257666e9881d33b1abc88daccaf73f7b6340fb7946655cd10f"},
+    {file = "coverage-7.13.4-cp310-cp310-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:2a09cfa6a5862bc2fc6ca7c3def5b2926194a56b8ab78ffcf617d28911123012"},
+    {file = "coverage-7.13.4-cp310-cp310-manylinux2014_ppc64le.manylinux_2_17_ppc64le.manylinux_2_28_ppc64le.whl", hash = "sha256:296f8b0af861d3970c2a4d8c91d48eb4dd4771bcef9baedec6a9b515d7de3def"},
+    {file = "coverage-7.13.4-cp310-cp310-manylinux_2_31_riscv64.manylinux_2_39_riscv64.whl", hash = "sha256:e101609bcbbfb04605ea1027b10dc3735c094d12d40826a60f897b98b1c30256"},
+    {file = "coverage-7.13.4-cp310-cp310-musllinux_1_2_aarch64.whl", hash = "sha256:aa3feb8db2e87ff5e6d00d7e1480ae241876286691265657b500886c98f38bda"},
+    {file = "coverage-7.13.4-cp310-cp310-musllinux_1_2_i686.whl", hash = "sha256:4fc7fa81bbaf5a02801b65346c8b3e657f1d93763e58c0abdf7c992addd81a92"},
+    {file = "coverage-7.13.4-cp310-cp310-musllinux_1_2_ppc64le.whl", hash = "sha256:33901f604424145c6e9c2398684b92e176c0b12df77d52db81c20abd48c3794c"},
+    {file = "coverage-7.13.4-cp310-cp310-musllinux_1_2_riscv64.whl", hash = "sha256:bb28c0f2cf2782508a40cec377935829d5fcc3ad9a3681375af4e84eb34b6b58"},
+    {file = "coverage-7.13.4-cp310-cp310-musllinux_1_2_x86_64.whl", hash = "sha256:9d107aff57a83222ddbd8d9ee705ede2af2cc926608b57abed8ef96b50b7e8f9"},
+    {file = "coverage-7.13.4-cp310-cp310-win32.whl", hash = "sha256:a6f94a7d00eb18f1b6d403c91a88fd58cfc92d4b16080dfdb774afc8294469bf"},
+    {file = "coverage-7.13.4-cp310-cp310-win_amd64.whl", hash = "sha256:2cb0f1e000ebc419632bbe04366a8990b6e32c4e0b51543a6484ffe15eaeda95"},
+    {file = "coverage-7.13.4-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:d490ba50c3f35dd7c17953c68f3270e7ccd1c6642e2d2afe2d8e720b98f5a053"},
+    {file = "coverage-7.13.4-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:19bc3c88078789f8ef36acb014d7241961dbf883fd2533d18cb1e7a5b4e28b11"},
+    {file = "coverage-7.13.4-cp311-cp311-manylinux1_i686.manylinux_2_28_i686.manylinux_2_5_i686.whl", hash = "sha256:3998e5a32e62fdf410c0dbd3115df86297995d6e3429af80b8798aad894ca7aa"},
+    {file = "coverage-7.13.4-cp311-cp311-manylinux1_x86_64.manylinux_2_28_x86_64.manylinux_2_5_x86_64.whl", hash = "sha256:8e264226ec98e01a8e1054314af91ee6cde0eacac4f465cc93b03dbe0bce2fd7"},
+    {file = "coverage-7.13.4-cp311-cp311-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:a3aa4e7b9e416774b21797365b358a6e827ffadaaca81b69ee02946852449f00"},
+    {file = "coverage-7.13.4-cp311-cp311-manylinux2014_ppc64le.manylinux_2_17_ppc64le.manylinux_2_28_ppc64le.whl", hash = "sha256:71ca20079dd8f27fcf808817e281e90220475cd75115162218d0e27549f95fef"},
+    {file = "coverage-7.13.4-cp311-cp311-manylinux_2_31_riscv64.manylinux_2_39_riscv64.whl", hash = "sha256:e2f25215f1a359ab17320b47bcdaca3e6e6356652e8256f2441e4ef972052903"},
+    {file = "coverage-7.13.4-cp311-cp311-musllinux_1_2_aarch64.whl", hash = "sha256:d65b2d373032411e86960604dc4edac91fdfb5dca539461cf2cbe78327d1e64f"},
+    {file = "coverage-7.13.4-cp311-cp311-musllinux_1_2_i686.whl", hash = "sha256:94eb63f9b363180aff17de3e7c8760c3ba94664ea2695c52f10111244d16a299"},
+    {file = "coverage-7.13.4-cp311-cp311-musllinux_1_2_ppc64le.whl", hash = "sha256:e856bf6616714c3a9fbc270ab54103f4e685ba236fa98c054e8f87f266c93505"},
+    {file = "coverage-7.13.4-cp311-cp311-musllinux_1_2_riscv64.whl", hash = "sha256:65dfcbe305c3dfe658492df2d85259e0d79ead4177f9ae724b6fb245198f55d6"},
+    {file = "coverage-7.13.4-cp311-cp311-musllinux_1_2_x86_64.whl", hash = "sha256:b507778ae8a4c915436ed5c2e05b4a6cecfa70f734e19c22a005152a11c7b6a9"},
+    {file = "coverage-7.13.4-cp311-cp311-win32.whl", hash = "sha256:784fc3cf8be001197b652d51d3fd259b1e2262888693a4636e18879f613a62a9"},
+    {file = "coverage-7.13.4-cp311-cp311-win_amd64.whl", hash = "sha256:2421d591f8ca05b308cf0092807308b2facbefe54af7c02ac22548b88b95c98f"},
+    {file = "coverage-7.13.4-cp311-cp311-win_arm64.whl", hash = "sha256:79e73a76b854d9c6088fe5d8b2ebe745f8681c55f7397c3c0a016192d681045f"},
+    {file = "coverage-7.13.4-cp312-cp312-macosx_10_13_x86_64.whl", hash = "sha256:02231499b08dabbe2b96612993e5fc34217cdae907a51b906ac7fca8027a4459"},
+    {file = "coverage-7.13.4-cp312-cp312-macosx_11_0_arm64.whl", hash = "sha256:40aa8808140e55dc022b15d8aa7f651b6b3d68b365ea0398f1441e0b04d859c3"},
+    {file = "coverage-7.13.4-cp312-cp312-manylinux1_i686.manylinux_2_28_i686.manylinux_2_5_i686.whl", hash = "sha256:5b856a8ccf749480024ff3bd7310adaef57bf31fd17e1bfc404b7940b6986634"},
+    {file = "coverage-7.13.4-cp312-cp312-manylinux1_x86_64.manylinux_2_28_x86_64.manylinux_2_5_x86_64.whl", hash = "sha256:2c048ea43875fbf8b45d476ad79f179809c590ec7b79e2035c662e7afa3192e3"},
+    {file = "coverage-7.13.4-cp312-cp312-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:b7b38448866e83176e28086674fe7368ab8590e4610fb662b44e345b86d63ffa"},
+    {file = "coverage-7.13.4-cp312-cp312-manylinux2014_ppc64le.manylinux_2_17_ppc64le.manylinux_2_28_ppc64le.whl", hash = "sha256:de6defc1c9badbf8b9e67ae90fd00519186d6ab64e5cc5f3d21359c2a9b2c1d3"},
+    {file = "coverage-7.13.4-cp312-cp312-manylinux_2_31_riscv64.manylinux_2_39_riscv64.whl", hash = "sha256:7eda778067ad7ffccd23ecffce537dface96212576a07924cbf0d8799d2ded5a"},
+    {file = "coverage-7.13.4-cp312-cp312-musllinux_1_2_aarch64.whl", hash = "sha256:e87f6c587c3f34356c3759f0420693e35e7eb0e2e41e4c011cb6ec6ecbbf1db7"},
+    {file = "coverage-7.13.4-cp312-cp312-musllinux_1_2_i686.whl", hash = "sha256:8248977c2e33aecb2ced42fef99f2d319e9904a36e55a8a68b69207fb7e43edc"},
+    {file = "coverage-7.13.4-cp312-cp312-musllinux_1_2_ppc64le.whl", hash = "sha256:25381386e80ae727608e662474db537d4df1ecd42379b5ba33c84633a2b36d47"},
+    {file = "coverage-7.13.4-cp312-cp312-musllinux_1_2_riscv64.whl", hash = "sha256:ee756f00726693e5ba94d6df2bdfd64d4852d23b09bb0bc700e3b30e6f333985"},
+    {file = "coverage-7.13.4-cp312-cp312-musllinux_1_2_x86_64.whl", hash = "sha256:fdfc1e28e7c7cdce44985b3043bc13bbd9c747520f94a4d7164af8260b3d91f0"},
+    {file = "coverage-7.13.4-cp312-cp312-win32.whl", hash = "sha256:01d4cbc3c283a17fc1e42d614a119f7f438eabb593391283adca8dc86eff1246"},
+    {file = "coverage-7.13.4-cp312-cp312-win_amd64.whl", hash = "sha256:9401ebc7ef522f01d01d45532c68c5ac40fb27113019b6b7d8b208f6e9baa126"},
+    {file = "coverage-7.13.4-cp312-cp312-win_arm64.whl", hash = "sha256:b1ec7b6b6e93255f952e27ab58fbc68dcc468844b16ecbee881aeb29b6ab4d8d"},
+    {file = "coverage-7.13.4-cp313-cp313-macosx_10_13_x86_64.whl", hash = "sha256:b66a2da594b6068b48b2692f043f35d4d3693fb639d5ea8b39533c2ad9ac3ab9"},
+    {file = "coverage-7.13.4-cp313-cp313-macosx_11_0_arm64.whl", hash = "sha256:3599eb3992d814d23b35c536c28df1a882caa950f8f507cef23d1cbf334995ac"},
+    {file = "coverage-7.13.4-cp313-cp313-manylinux1_i686.manylinux_2_28_i686.manylinux_2_5_i686.whl", hash = "sha256:93550784d9281e374fb5a12bf1324cc8a963fd63b2d2f223503ef0fd4aa339ea"},
+    {file = "coverage-7.13.4-cp313-cp313-manylinux1_x86_64.manylinux_2_28_x86_64.manylinux_2_5_x86_64.whl", hash = "sha256:b720ce6a88a2755f7c697c23268ddc47a571b88052e6b155224347389fdf6a3b"},
+    {file = "coverage-7.13.4-cp313-cp313-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:7b322db1284a2ed3aa28ffd8ebe3db91c929b7a333c0820abec3d838ef5b3525"},
+    {file = "coverage-7.13.4-cp313-cp313-manylinux2014_ppc64le.manylinux_2_17_ppc64le.manylinux_2_28_ppc64le.whl", hash = "sha256:f4594c67d8a7c89cf922d9df0438c7c7bb022ad506eddb0fdb2863359ff78242"},
+    {file = "coverage-7.13.4-cp313-cp313-manylinux_2_31_riscv64.manylinux_2_39_riscv64.whl", hash = "sha256:53d133df809c743eb8bce33b24bcababb371f4441340578cd406e084d94a6148"},
+    {file = "coverage-7.13.4-cp313-cp313-musllinux_1_2_aarch64.whl", hash = "sha256:76451d1978b95ba6507a039090ba076105c87cc76fc3efd5d35d72093964d49a"},
+    {file = "coverage-7.13.4-cp313-cp313-musllinux_1_2_i686.whl", hash = "sha256:7f57b33491e281e962021de110b451ab8a24182589be17e12a22c79047935e23"},
+    {file = "coverage-7.13.4-cp313-cp313-musllinux_1_2_ppc64le.whl", hash = "sha256:1731dc33dc276dafc410a885cbf5992f1ff171393e48a21453b78727d090de80"},
+    {file = "coverage-7.13.4-cp313-cp313-musllinux_1_2_riscv64.whl", hash = "sha256:bd60d4fe2f6fa7dff9223ca1bbc9f05d2b6697bc5961072e5d3b952d46e1b1ea"},
+    {file = "coverage-7.13.4-cp313-cp313-musllinux_1_2_x86_64.whl", hash = "sha256:9181a3ccead280b828fae232df12b16652702b49d41e99d657f46cc7b1f6ec7a"},
+    {file = "coverage-7.13.4-cp313-cp313-win32.whl", hash = "sha256:f53d492307962561ac7de4cd1de3e363589b000ab69617c6156a16ba7237998d"},
+    {file = "coverage-7.13.4-cp313-cp313-win_amd64.whl", hash = "sha256:e6f70dec1cc557e52df5306d051ef56003f74d56e9c4dd7ddb07e07ef32a84dd"},
+    {file = "coverage-7.13.4-cp313-cp313-win_arm64.whl", hash = "sha256:fb07dc5da7e849e2ad31a5d74e9bece81f30ecf5a42909d0a695f8bd1874d6af"},
+    {file = "coverage-7.13.4-cp313-cp313t-macosx_10_13_x86_64.whl", hash = "sha256:40d74da8e6c4b9ac18b15331c4b5ebc35a17069410cad462ad4f40dcd2d50c0d"},
+    {file = "coverage-7.13.4-cp313-cp313t-macosx_11_0_arm64.whl", hash = "sha256:4223b4230a376138939a9173f1bdd6521994f2aff8047fae100d6d94d50c5a12"},
+    {file = "coverage-7.13.4-cp313-cp313t-manylinux1_i686.manylinux_2_28_i686.manylinux_2_5_i686.whl", hash = "sha256:1d4be36a5114c499f9f1f9195e95ebf979460dbe2d88e6816ea202010ba1c34b"},
+    {file = "coverage-7.13.4-cp313-cp313t-manylinux1_x86_64.manylinux_2_28_x86_64.manylinux_2_5_x86_64.whl", hash = "sha256:200dea7d1e8095cc6e98cdabe3fd1d21ab17d3cee6dab00cadbb2fe35d9c15b9"},
+    {file = "coverage-7.13.4-cp313-cp313t-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:b8eb931ee8e6d8243e253e5ed7336deea6904369d2fd8ae6e43f68abbf167092"},
+    {file = "coverage-7.13.4-cp313-cp313t-manylinux2014_ppc64le.manylinux_2_17_ppc64le.manylinux_2_28_ppc64le.whl", hash = "sha256:75eab1ebe4f2f64d9509b984f9314d4aa788540368218b858dad56dc8f3e5eb9"},
+    {file = "coverage-7.13.4-cp313-cp313t-manylinux_2_31_riscv64.manylinux_2_39_riscv64.whl", hash = "sha256:c35eb28c1d085eb7d8c9b3296567a1bebe03ce72962e932431b9a61f28facf26"},
+    {file = "coverage-7.13.4-cp313-cp313t-musllinux_1_2_aarch64.whl", hash = "sha256:eb88b316ec33760714a4720feb2816a3a59180fd58c1985012054fa7aebee4c2"},
+    {file = "coverage-7.13.4-cp313-cp313t-musllinux_1_2_i686.whl", hash = "sha256:7d41eead3cc673cbd38a4417deb7fd0b4ca26954ff7dc6078e33f6ff97bed940"},
+    {file = "coverage-7.13.4-cp313-cp313t-musllinux_1_2_ppc64le.whl", hash = "sha256:fb26a934946a6afe0e326aebe0730cdff393a8bc0bbb65a2f41e30feddca399c"},
+    {file = "coverage-7.13.4-cp313-cp313t-musllinux_1_2_riscv64.whl", hash = "sha256:dae88bc0fc77edaa65c14be099bd57ee140cf507e6bfdeea7938457ab387efb0"},
+    {file = "coverage-7.13.4-cp313-cp313t-musllinux_1_2_x86_64.whl", hash = "sha256:845f352911777a8e722bfce168958214951e07e47e5d5d9744109fa5fe77f79b"},
+    {file = "coverage-7.13.4-cp313-cp313t-win32.whl", hash = "sha256:2fa8d5f8de70688a28240de9e139fa16b153cc3cbb01c5f16d88d6505ebdadf9"},
+    {file = "coverage-7.13.4-cp313-cp313t-win_amd64.whl", hash = "sha256:9351229c8c8407645840edcc277f4a2d44814d1bc34a2128c11c2a031d45a5dd"},
+    {file = "coverage-7.13.4-cp313-cp313t-win_arm64.whl", hash = "sha256:30b8d0512f2dc8c8747557e8fb459d6176a2c9e5731e2b74d311c03b78451997"},
+    {file = "coverage-7.13.4-cp314-cp314-macosx_10_15_x86_64.whl", hash = "sha256:300deaee342f90696ed186e3a00c71b5b3d27bffe9e827677954f4ee56969601"},
+    {file = "coverage-7.13.4-cp314-cp314-macosx_11_0_arm64.whl", hash = "sha256:29e3220258d682b6226a9b0925bc563ed9a1ebcff3cad30f043eceea7eaf2689"},
+    {file = "coverage-7.13.4-cp314-cp314-manylinux1_i686.manylinux_2_28_i686.manylinux_2_5_i686.whl", hash = "sha256:391ee8f19bef69210978363ca930f7328081c6a0152f1166c91f0b5fdd2a773c"},
+    {file = "coverage-7.13.4-cp314-cp314-manylinux1_x86_64.manylinux_2_28_x86_64.manylinux_2_5_x86_64.whl", hash = "sha256:0dd7ab8278f0d58a0128ba2fca25824321f05d059c1441800e934ff2efa52129"},
+    {file = "coverage-7.13.4-cp314-cp314-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:78cdf0d578b15148b009ccf18c686aa4f719d887e76e6b40c38ffb61d264a552"},
+    {file = "coverage-7.13.4-cp314-cp314-manylinux2014_ppc64le.manylinux_2_17_ppc64le.manylinux_2_28_ppc64le.whl", hash = "sha256:48685fee12c2eb3b27c62f2658e7ea21e9c3239cba5a8a242801a0a3f6a8c62a"},
+    {file = "coverage-7.13.4-cp314-cp314-manylinux_2_31_riscv64.manylinux_2_39_riscv64.whl", hash = "sha256:4e83efc079eb39480e6346a15a1bcb3e9b04759c5202d157e1dd4303cd619356"},
+    {file = "coverage-7.13.4-cp314-cp314-musllinux_1_2_aarch64.whl", hash = "sha256:ecae9737b72408d6a950f7e525f30aca12d4bd8dd95e37342e5beb3a2a8c4f71"},
+    {file = "coverage-7.13.4-cp314-cp314-musllinux_1_2_i686.whl", hash = "sha256:ae4578f8528569d3cf303fef2ea569c7f4c4059a38c8667ccef15c6e1f118aa5"},
+    {file = "coverage-7.13.4-cp314-cp314-musllinux_1_2_ppc64le.whl", hash = "sha256:6fdef321fdfbb30a197efa02d48fcd9981f0d8ad2ae8903ac318adc653f5df98"},
+    {file = "coverage-7.13.4-cp314-cp314-musllinux_1_2_riscv64.whl", hash = "sha256:2b0f6ccf3dbe577170bebfce1318707d0e8c3650003cb4b3a9dd744575daa8b5"},
+    {file = "coverage-7.13.4-cp314-cp314-musllinux_1_2_x86_64.whl", hash = "sha256:75fcd519f2a5765db3f0e391eb3b7d150cce1a771bf4c9f861aeab86c767a3c0"},
+    {file = "coverage-7.13.4-cp314-cp314-win32.whl", hash = "sha256:8e798c266c378da2bd819b0677df41ab46d78065fb2a399558f3f6cae78b2fbb"},
+    {file = "coverage-7.13.4-cp314-cp314-win_amd64.whl", hash = "sha256:245e37f664d89861cf2329c9afa2c1fe9e6d4e1a09d872c947e70718aeeac505"},
+    {file = "coverage-7.13.4-cp314-cp314-win_arm64.whl", hash = "sha256:ad27098a189e5838900ce4c2a99f2fe42a0bf0c2093c17c69b45a71579e8d4a2"},
+    {file = "coverage-7.13.4-cp314-cp314t-macosx_10_15_x86_64.whl", hash = "sha256:85480adfb35ffc32d40918aad81b89c69c9cc5661a9b8a81476d3e645321a056"},
+    {file = "coverage-7.13.4-cp314-cp314t-macosx_11_0_arm64.whl", hash = "sha256:79be69cf7f3bf9b0deeeb062eab7ac7f36cd4cc4c4dd694bd28921ba4d8596cc"},
+    {file = "coverage-7.13.4-cp314-cp314t-manylinux1_i686.manylinux_2_28_i686.manylinux_2_5_i686.whl", hash = "sha256:caa421e2684e382c5d8973ac55e4f36bed6821a9bad5c953494de960c74595c9"},
+    {file = "coverage-7.13.4-cp314-cp314t-manylinux1_x86_64.manylinux_2_28_x86_64.manylinux_2_5_x86_64.whl", hash = "sha256:14375934243ee05f56c45393fe2ce81fe5cc503c07cee2bdf1725fb8bef3ffaf"},
+    {file = "coverage-7.13.4-cp314-cp314t-manylinux2014_aarch64.manylinux_2_17_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:25a41c3104d08edb094d9db0d905ca54d0cd41c928bb6be3c4c799a54753af55"},
+    {file = "coverage-7.13.4-cp314-cp314t-manylinux2014_ppc64le.manylinux_2_17_ppc64le.manylinux_2_28_ppc64le.whl", hash = "sha256:6f01afcff62bf9a08fb32b2c1d6e924236c0383c02c790732b6537269e466a72"},
+    {file = "coverage-7.13.4-cp314-cp314t-manylinux_2_31_riscv64.manylinux_2_39_riscv64.whl", hash = "sha256:eb9078108fbf0bcdde37c3f4779303673c2fa1fe8f7956e68d447d0dd426d38a"},
+    {file = "coverage-7.13.4-cp314-cp314t-musllinux_1_2_aarch64.whl", hash = "sha256:0e086334e8537ddd17e5f16a344777c1ab8194986ec533711cbe6c41cde841b6"},
+    {file = "coverage-7.13.4-cp314-cp314t-musllinux_1_2_i686.whl", hash = "sha256:725d985c5ab621268b2edb8e50dfe57633dc69bda071abc470fed55a14935fd3"},
+    {file = "coverage-7.13.4-cp314-cp314t-musllinux_1_2_ppc64le.whl", hash = "sha256:3c06f0f1337c667b971ca2f975523347e63ec5e500b9aa5882d91931cd3ef750"},
+    {file = "coverage-7.13.4-cp314-cp314t-musllinux_1_2_riscv64.whl", hash = "sha256:590c0ed4bf8e85f745e6b805b2e1c457b2e33d5255dd9729743165253bc9ad39"},
+    {file = "coverage-7.13.4-cp314-cp314t-musllinux_1_2_x86_64.whl", hash = "sha256:eb30bf180de3f632cd043322dad5751390e5385108b2807368997d1a92a509d0"},
+    {file = "coverage-7.13.4-cp314-cp314t-win32.whl", hash = "sha256:c4240e7eded42d131a2d2c4dec70374b781b043ddc79a9de4d55ca71f8e98aea"},
+    {file = "coverage-7.13.4-cp314-cp314t-win_amd64.whl", hash = "sha256:4c7d3cc01e7350f2f0f6f7036caaf5673fb56b6998889ccfe9e1c1fe75a9c932"},
+    {file = "coverage-7.13.4-cp314-cp314t-win_arm64.whl", hash = "sha256:23e3f687cf945070d1c90f85db66d11e3025665d8dafa831301a0e0038f3db9b"},
+    {file = "coverage-7.13.4-py3-none-any.whl", hash = "sha256:1af1641e57cf7ba1bd67d677c9abdbcd6cc2ab7da3bca7fa1e2b7e50e65f2ad0"},
+    {file = "coverage-7.13.4.tar.gz", hash = "sha256:e5c8f6ed1e61a8b2dcdf31eb0b9bbf0130750ca79c1c49eb898e2ad86f5ccc91"},
 ]
 
 [package.dependencies]
@@ -523,7 +541,7 @@ description = "Backport of PEP 654 (exception groups)"
 optional = false
 python-versions = ">=3.7"
 groups = ["main", "dev"]
-markers = "python_version == \"3.10\""
+markers = "python_version < \"3.11\""
 files = [
     {file = "exceptiongroup-1.3.0-py3-none-any.whl", hash = "sha256:4d111e6e0c13d0644cad6ddaa7ed0261a0b36971f6d23e7ec9b4b9097da78a10"},
     {file = "exceptiongroup-1.3.0.tar.gz", hash = "sha256:b241f5885f560bc56a59ee63ca4c6a8bfa46ae4ad651af316d4e81817bb9fd88"},
@@ -2162,23 +2180,23 @@ testing = ["coverage (>=6.2)", "hypothesis (>=5.7.1)"]
 
 [[package]]
 name = "pytest-cov"
-version = "6.2.1"
+version = "7.0.0"
 description = "Pytest plugin for measuring coverage."
 optional = false
 python-versions = ">=3.9"
 groups = ["dev"]
 files = [
-    {file = "pytest_cov-6.2.1-py3-none-any.whl", hash = "sha256:f5bc4c23f42f1cdd23c70b1dab1bbaef4fc505ba950d53e0081d0730dd7e86d5"},
-    {file = "pytest_cov-6.2.1.tar.gz", hash = "sha256:25cc6cc0a5358204b8108ecedc51a9b57b34cc6b8c967cc2c01a4e00d8a67da2"},
+    {file = "pytest_cov-7.0.0-py3-none-any.whl", hash = "sha256:3b8e9558b16cc1479da72058bdecf8073661c7f57f7d3c5f22a1c23507f2d861"},
+    {file = "pytest_cov-7.0.0.tar.gz", hash = "sha256:33c97eda2e049a0c5298e91f519302a1334c26ac65c1a483d6206fd458361af1"},
 ]
 
 [package.dependencies]
-coverage = {version = ">=7.5", extras = ["toml"]}
+coverage = {version = ">=7.10.6", extras = ["toml"]}
 pluggy = ">=1.2"
-pytest = ">=6.2.5"
+pytest = ">=7"
 
 [package.extras]
-testing = ["fields", "hunter", "process-tests", "pytest-xdist", "virtualenv"]
+testing = ["process-tests", "pytest-xdist", "virtualenv"]
 
 [[package]]
 name = "pytest-mock"
@@ -2545,7 +2563,7 @@ description = "A lil' TOML parser"
 optional = false
 python-versions = ">=3.8"
 groups = ["dev"]
-markers = "python_version == \"3.10\""
+markers = "python_version < \"3.11\""
 files = [
     {file = "tomli-2.2.1-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:678e4fa69e4575eb77d103de3df8a895e1591b48e740211bd1067378c69e8249"},
     {file = "tomli-2.2.1-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:023aa114dd824ade0100497eb2318602af309e5a55595f76b626d6d9f3b7b0a6"},
@@ -2893,4 +2911,4 @@ type = ["pytest-mypy"]
 [metadata]
 lock-version = "2.1"
 python-versions = ">=3.10,<4.0"
-content-hash = "b7ac335a86aa44c3d7d2802298818b389a6f1286e3e9b7b0edb2ff06377cecaf"
+content-hash = "40eae94995dc0a388fa832ed4af9b6137f28d5b5ced3aaea70d5f91d4d9a179d"

autogpt_platform/autogpt_libs/pyproject.toml

@@ -26,7 +26,7 @@ pyright = "^1.1.408"
 pytest = "^8.4.1"
 pytest-asyncio = "^1.3.0"
 pytest-mock = "^3.15.1"
-pytest-cov = "^6.2.1"
+pytest-cov = "^7.0.0"
 ruff = "^0.15.0"
 
 [build-system]

autogpt_platform/backend/backend/api/features/chat/response_model.py

@@ -18,6 +18,10 @@ class ResponseType(str, Enum):
     START = "start"
     FINISH = "finish"
 
+    # Step lifecycle (one LLM API call within a message)
+    START_STEP = "start-step"
+    FINISH_STEP = "finish-step"
+
     # Text streaming
     TEXT_START = "text-start"
     TEXT_DELTA = "text-delta"
@@ -57,6 +61,16 @@ class StreamStart(StreamBaseResponse):
         description="Task ID for SSE reconnection. Clients can reconnect using GET /tasks/{taskId}/stream",
     )
 
+    def to_sse(self) -> str:
+        """Convert to SSE format, excluding non-protocol fields like taskId."""
+        import json
+
+        data: dict[str, Any] = {
+            "type": self.type.value,
+            "messageId": self.messageId,
+        }
+        return f"data: {json.dumps(data)}\n\n"
+
 
 class StreamFinish(StreamBaseResponse):
     """End of message/stream."""
@@ -64,6 +78,26 @@ class StreamFinish(StreamBaseResponse):
     type: ResponseType = ResponseType.FINISH
 
 
+class StreamStartStep(StreamBaseResponse):
+    """Start of a step (one LLM API call within a message).
+
+    The AI SDK uses this to add a step-start boundary to message.parts,
+    enabling visual separation between multiple LLM calls in a single message.
+    """
+
+    type: ResponseType = ResponseType.START_STEP
+
+
+class StreamFinishStep(StreamBaseResponse):
+    """End of a step (one LLM API call within a message).
+
+    The AI SDK uses this to reset activeTextParts and activeReasoningParts,
+    so the next LLM call in a tool-call continuation starts with clean state.
+    """
+
+    type: ResponseType = ResponseType.FINISH_STEP
+
+
 # ========== Text Streaming ==========
 
 
@@ -117,7 +151,7 @@ class StreamToolOutputAvailable(StreamBaseResponse):
     type: ResponseType = ResponseType.TOOL_OUTPUT_AVAILABLE
     toolCallId: str = Field(..., description="Tool call ID this responds to")
     output: str | dict[str, Any] = Field(..., description="Tool execution output")
-    # Additional fields for internal use (not part of AI SDK spec but useful)
+    # Keep these for internal backend use
     toolName: str | None = Field(
         default=None, description="Name of the tool that was executed"
     )
@@ -125,6 +159,17 @@ class StreamToolOutputAvailable(StreamBaseResponse):
         default=True, description="Whether the tool execution succeeded"
     )
 
+    def to_sse(self) -> str:
+        """Convert to SSE format, excluding non-spec fields."""
+        import json
+
+        data = {
+            "type": self.type.value,
+            "toolCallId": self.toolCallId,
+            "output": self.output,
+        }
+        return f"data: {json.dumps(data)}\n\n"
+
 
 # ========== Other ==========
 

autogpt_platform/backend/backend/api/features/chat/routes.py

@@ -6,7 +6,7 @@ from collections.abc import AsyncGenerator
 from typing import Annotated
 
 from autogpt_libs import auth
-from fastapi import APIRouter, Depends, Header, HTTPException, Query, Security
+from fastapi import APIRouter, Depends, Header, HTTPException, Query, Response, Security
 from fastapi.responses import StreamingResponse
 from pydantic import BaseModel
 
@@ -17,7 +17,29 @@ from . import stream_registry
 from .completion_handler import process_operation_failure, process_operation_success
 from .config import ChatConfig
 from .model import ChatSession, create_chat_session, get_chat_session, get_user_sessions
-from .response_model import StreamFinish, StreamHeartbeat, StreamStart
+from .response_model import StreamFinish, StreamHeartbeat
+from .tools.models import (
+    AgentDetailsResponse,
+    AgentOutputResponse,
+    AgentPreviewResponse,
+    AgentSavedResponse,
+    AgentsFoundResponse,
+    BlockListResponse,
+    BlockOutputResponse,
+    ClarificationNeededResponse,
+    DocPageResponse,
+    DocSearchResultsResponse,
+    ErrorResponse,
+    ExecutionStartedResponse,
+    InputValidationErrorResponse,
+    NeedLoginResponse,
+    NoResultsResponse,
+    OperationInProgressResponse,
+    OperationPendingResponse,
+    OperationStartedResponse,
+    SetupRequirementsResponse,
+    UnderstandingUpdatedResponse,
+)
 
 config = ChatConfig()
 
@@ -269,8 +291,6 @@ async def stream_chat_post(
     import time
 
     stream_start_time = time.perf_counter()
-
-    # Base log metadata (task_id added after creation)
     log_meta = {"component": "ChatStream", "session_id": session_id}
     if user_id:
         log_meta["user_id"] = user_id
@@ -328,24 +348,6 @@ async def stream_chat_post(
         first_chunk_time, ttfc = None, None
         chunk_count = 0
         try:
-            # Emit a start event with task_id for reconnection
-            start_chunk = StreamStart(messageId=task_id, taskId=task_id)
-            await stream_registry.publish_chunk(task_id, start_chunk)
-            logger.info(
-                f"[TIMING] StreamStart published at {(time_module.perf_counter() - gen_start_time)*1000:.1f}ms",
-                extra={
-                    "json_fields": {
-                        **log_meta,
-                        "elapsed_ms": (time_module.perf_counter() - gen_start_time)
-                        * 1000,
-                    }
-                },
-            )
-
-            logger.info(
-                "[TIMING] Calling stream_chat_completion",
-                extra={"json_fields": log_meta},
-            )
             async for chunk in chat_service.stream_chat_completion(
                 session_id,
                 request.message,
@@ -353,6 +355,7 @@ async def stream_chat_post(
                 user_id=user_id,
                 session=session,  # Pass pre-fetched session to avoid double-fetch
                 context=request.context,
+                _task_id=task_id,  # Pass task_id so service emits start with taskId for reconnection
             ):
                 chunk_count += 1
                 if first_chunk_time is None:
@@ -388,7 +391,6 @@ async def stream_chat_post(
                     }
                 },
             )
-
             await stream_registry.mark_task_completed(task_id, "completed")
         except Exception as e:
             elapsed = time_module.perf_counter() - gen_start_time
@@ -428,34 +430,13 @@ async def stream_chat_post(
         chunks_yielded = 0
         try:
             # Subscribe to the task stream (this replays existing messages + live updates)
-            subscribe_start = time_module.perf_counter()
-            logger.info(
-                "[TIMING] Calling subscribe_to_task",
-                extra={"json_fields": log_meta},
-            )
             subscriber_queue = await stream_registry.subscribe_to_task(
                 task_id=task_id,
                 user_id=user_id,
                 last_message_id="0-0",  # Get all messages from the beginning
             )
-            subscribe_time = (time_module.perf_counter() - subscribe_start) * 1000
-            logger.info(
-                f"[TIMING] subscribe_to_task completed in {subscribe_time:.1f}ms, "
-                f"queue_ok={subscriber_queue is not None}",
-                extra={
-                    "json_fields": {
-                        **log_meta,
-                        "duration_ms": subscribe_time,
-                        "queue_obtained": subscriber_queue is not None,
-                    }
-                },
-            )
 
             if subscriber_queue is None:
-                logger.info(
-                    "[TIMING] subscriber_queue is None, yielding finish",
-                    extra={"json_fields": log_meta},
-                )
                 yield StreamFinish().to_sse()
                 yield "data: [DONE]\n\n"
                 return
@@ -467,11 +448,7 @@ async def stream_chat_post(
             )
             while True:
                 try:
-                    queue_wait_start = time_module.perf_counter()
                     chunk = await asyncio.wait_for(subscriber_queue.get(), timeout=30.0)
-                    queue_wait_time = (
-                        time_module.perf_counter() - queue_wait_start
-                    ) * 1000
                     chunks_yielded += 1
 
                     if not first_chunk_yielded:
@@ -479,26 +456,12 @@ async def stream_chat_post(
                         elapsed = time_module.perf_counter() - event_gen_start
                         logger.info(
                             f"[TIMING] FIRST CHUNK from queue at {elapsed:.2f}s, "
-                            f"type={type(chunk).__name__}, "
-                            f"wait={queue_wait_time:.1f}ms",
+                            f"type={type(chunk).__name__}",
                             extra={
                                 "json_fields": {
                                     **log_meta,
                                     "chunk_type": type(chunk).__name__,
                                     "elapsed_ms": elapsed * 1000,
-                                    "queue_wait_ms": queue_wait_time,
-                                }
-                            },
-                        )
-                    elif chunks_yielded % 50 == 0:
-                        logger.info(
-                            f"[TIMING] Chunk #{chunks_yielded}, "
-                            f"type={type(chunk).__name__}",
-                            extra={
-                                "json_fields": {
-                                    **log_meta,
-                                    "chunk_number": chunks_yielded,
-                                    "chunk_type": type(chunk).__name__,
                                 }
                             },
                         )
@@ -521,13 +484,6 @@ async def stream_chat_post(
                         )
                         break
                 except asyncio.TimeoutError:
-                    # Send heartbeat to keep connection alive
-                    logger.info(
-                        f"[TIMING] Heartbeat timeout, chunks_so_far={chunks_yielded}",
-                        extra={
-                            "json_fields": {**log_meta, "chunks_so_far": chunks_yielded}
-                        },
-                    )
                     yield StreamHeartbeat().to_sse()
 
         except GeneratorExit:
@@ -592,63 +548,90 @@ async def stream_chat_post(
 @router.get(
     "/sessions/{session_id}/stream",
 )
-async def stream_chat_get(
+async def resume_session_stream(
     session_id: str,
-    message: Annotated[str, Query(min_length=1, max_length=10000)],
     user_id: str | None = Depends(auth.get_user_id),
-    is_user_message: bool = Query(default=True),
 ):
     """
-    Stream chat responses for a session (GET - legacy endpoint).
+    Resume an active stream for a session.
 
-    Streams the AI/completion responses in real time over Server-Sent Events (SSE), including:
-      - Text fragments as they are generated
-      - Tool call UI elements (if invoked)
-      - Tool execution results
+    Called by the AI SDK's ``useChat(resume: true)`` on page load.
+    Checks for an active (in-progress) task on the session and either replays
+    the full SSE stream or returns 204 No Content if nothing is running.
 
     Args:
-        session_id: The chat session identifier to associate with the streamed messages.
-        message: The user's new message to process.
+        session_id: The chat session identifier.
         user_id: Optional authenticated user ID.
-        is_user_message: Whether the message is a user message.
-    Returns:
-        StreamingResponse: SSE-formatted response chunks.
 
+    Returns:
+        StreamingResponse (SSE) when an active stream exists,
+        or 204 No Content when there is nothing to resume.
     """
-    session = await _validate_and_get_session(session_id, user_id)
+    import asyncio
+
+    active_task, _last_id = await stream_registry.get_active_task_for_session(
+        session_id, user_id
+    )
+
+    if not active_task:
+        return Response(status_code=204)
+
+    subscriber_queue = await stream_registry.subscribe_to_task(
+        task_id=active_task.task_id,
+        user_id=user_id,
+        last_message_id="0-0",  # Full replay so useChat rebuilds the message
+    )
+
+    if subscriber_queue is None:
+        return Response(status_code=204)
 
     async def event_generator() -> AsyncGenerator[str, None]:
         chunk_count = 0
         first_chunk_type: str | None = None
-        async for chunk in chat_service.stream_chat_completion(
-            session_id,
-            message,
-            is_user_message=is_user_message,
-            user_id=user_id,
-            session=session,  # Pass pre-fetched session to avoid double-fetch
-        ):
-            if chunk_count < 3:
-                logger.info(
-                    "Chat stream chunk",
-                    extra={
-                        "session_id": session_id,
-                        "chunk_type": str(chunk.type),
-                    },
+        try:
+            while True:
+                try:
+                    chunk = await asyncio.wait_for(subscriber_queue.get(), timeout=30.0)
+                    if chunk_count < 3:
+                        logger.info(
+                            "Resume stream chunk",
+                            extra={
+                                "session_id": session_id,
+                                "chunk_type": str(chunk.type),
+                            },
+                        )
+                    if not first_chunk_type:
+                        first_chunk_type = str(chunk.type)
+                    chunk_count += 1
+                    yield chunk.to_sse()
+
+                    if isinstance(chunk, StreamFinish):
+                        break
+                except asyncio.TimeoutError:
+                    yield StreamHeartbeat().to_sse()
+        except GeneratorExit:
+            pass
+        except Exception as e:
+            logger.error(f"Error in resume stream for session {session_id}: {e}")
+        finally:
+            try:
+                await stream_registry.unsubscribe_from_task(
+                    active_task.task_id, subscriber_queue
                 )
-            if not first_chunk_type:
-                first_chunk_type = str(chunk.type)
-            chunk_count += 1
-            yield chunk.to_sse()
-        logger.info(
-            "Chat stream completed",
-            extra={
-                "session_id": session_id,
-                "n_chunks": chunk_count,
-                "first_chunk_type": first_chunk_type,
-            },
-        )
-        # AI SDK protocol termination
-        yield "data: [DONE]\n\n"
+            except Exception as unsub_err:
+                logger.error(
+                    f"Error unsubscribing from task {active_task.task_id}: {unsub_err}",
+                    exc_info=True,
+                )
+            logger.info(
+                "Resume stream completed",
+                extra={
+                    "session_id": session_id,
+                    "n_chunks": chunk_count,
+                    "first_chunk_type": first_chunk_type,
+                },
+            )
+            yield "data: [DONE]\n\n"
 
     return StreamingResponse(
         event_generator(),
@@ -656,8 +639,8 @@ async def stream_chat_get(
         headers={
             "Cache-Control": "no-cache",
             "Connection": "keep-alive",
-            "X-Accel-Buffering": "no",  # Disable nginx buffering
-            "x-vercel-ai-ui-message-stream": "v1",  # AI SDK protocol header
+            "X-Accel-Buffering": "no",
+            "x-vercel-ai-ui-message-stream": "v1",
         },
     )
 
@@ -969,3 +952,42 @@ async def health_check() -> dict:
         "service": "chat",
         "version": "0.1.0",
     }
+
+
+# ========== Schema Export (for OpenAPI / Orval codegen) ==========
+
+ToolResponseUnion = (
+    AgentsFoundResponse
+    | NoResultsResponse
+    | AgentDetailsResponse
+    | SetupRequirementsResponse
+    | ExecutionStartedResponse
+    | NeedLoginResponse
+    | ErrorResponse
+    | InputValidationErrorResponse
+    | AgentOutputResponse
+    | UnderstandingUpdatedResponse
+    | AgentPreviewResponse
+    | AgentSavedResponse
+    | ClarificationNeededResponse
+    | BlockListResponse
+    | BlockOutputResponse
+    | DocSearchResultsResponse
+    | DocPageResponse
+    | OperationStartedResponse
+    | OperationPendingResponse
+    | OperationInProgressResponse
+)
+
+
+@router.get(
+    "/schema/tool-responses",
+    response_model=ToolResponseUnion,
+    include_in_schema=True,
+    summary="[Dummy] Tool response type export for codegen",
+    description="This endpoint is not meant to be called. It exists solely to "
+    "expose tool response models in the OpenAPI schema for frontend codegen.",
+)
+async def _tool_response_schema() -> ToolResponseUnion:  # type: ignore[return]
+    """Never called at runtime. Exists only so Orval generates TS types."""
+    raise HTTPException(status_code=501, detail="Schema-only endpoint")

autogpt_platform/backend/backend/api/features/chat/service.py

@@ -52,8 +52,10 @@ from .response_model import (
     StreamBaseResponse,
     StreamError,
     StreamFinish,
+    StreamFinishStep,
     StreamHeartbeat,
     StreamStart,
+    StreamStartStep,
     StreamTextDelta,
     StreamTextEnd,
     StreamTextStart,
@@ -351,6 +353,10 @@ async def stream_chat_completion(
     retry_count: int = 0,
     session: ChatSession | None = None,
     context: dict[str, str] | None = None,  # {url: str, content: str}
+    _continuation_message_id: (
+        str | None
+    ) = None,  # Internal: reuse message ID for tool call continuations
+    _task_id: str | None = None,  # Internal: task ID for SSE reconnection support
 ) -> AsyncGenerator[StreamBaseResponse, None]:
     """Main entry point for streaming chat completions with database handling.
 
@@ -517,16 +523,21 @@ async def stream_chat_completion(
     # Generate unique IDs for AI SDK protocol
     import uuid as uuid_module
 
-    message_id = str(uuid_module.uuid4())
+    is_continuation = _continuation_message_id is not None
+    message_id = _continuation_message_id or str(uuid_module.uuid4())
     text_block_id = str(uuid_module.uuid4())
 
-    # Yield message start
+    # Only yield message start for the initial call, not for continuations.
     setup_time = (time.monotonic() - completion_start) * 1000
     logger.info(
         f"[TIMING] Setup complete, yielding StreamStart at {setup_time:.1f}ms",
         extra={"json_fields": {**log_meta, "setup_time_ms": setup_time}},
     )
-    yield StreamStart(messageId=message_id)
+    if not is_continuation:
+        yield StreamStart(messageId=message_id, taskId=_task_id)
+
+    # Emit start-step before each LLM call (AI SDK uses this to add step boundaries)
+    yield StreamStartStep()
 
     try:
         logger.info(
@@ -632,6 +643,10 @@ async def stream_chat_completion(
                     )
                 yield chunk
             elif isinstance(chunk, StreamFinish):
+                if has_done_tool_call:
+                    # Tool calls happened — close the step but don't send message-level finish.
+                    # The continuation will open a new step, and finish will come at the end.
+                    yield StreamFinishStep()
                 if not has_done_tool_call:
                     # Emit text-end before finish if we received text but haven't closed it
                     if has_received_text and not text_streaming_ended:
@@ -663,6 +678,8 @@ async def stream_chat_completion(
                             has_saved_assistant_message = True
 
                     has_yielded_end = True
+                    # Emit finish-step before finish (resets AI SDK text/reasoning state)
+                    yield StreamFinishStep()
                     yield chunk
             elif isinstance(chunk, StreamError):
                 has_yielded_error = True
@@ -712,6 +729,10 @@ async def stream_chat_completion(
             logger.info(
                 f"Retryable error encountered. Attempt {retry_count + 1}/{config.max_retries}"
             )
+            # Close the current step before retrying so the recursive call's
+            # StreamStartStep doesn't produce unbalanced step events.
+            if not has_yielded_end:
+                yield StreamFinishStep()
             should_retry = True
         else:
             # Non-retryable error or max retries exceeded
@@ -747,6 +768,7 @@ async def stream_chat_completion(
                 error_response = StreamError(errorText=error_message)
                 yield error_response
             if not has_yielded_end:
+                yield StreamFinishStep()
                 yield StreamFinish()
             return
 
@@ -761,6 +783,8 @@ async def stream_chat_completion(
             retry_count=retry_count + 1,
             session=session,
             context=context,
+            _continuation_message_id=message_id,  # Reuse message ID since start was already sent
+            _task_id=_task_id,
         ):
             yield chunk
         return  # Exit after retry to avoid double-saving in finally block
@@ -830,6 +854,8 @@ async def stream_chat_completion(
             session=session,  # Pass session object to avoid Redis refetch
             context=context,
             tool_call_response=str(tool_response_messages),
+            _continuation_message_id=message_id,  # Reuse message ID to avoid duplicates
+            _task_id=_task_id,
         ):
             yield chunk
 
@@ -1686,6 +1712,7 @@ async def _execute_long_running_tool_with_streaming(
             task_id,
             StreamError(errorText=str(e)),
         )
+        await stream_registry.publish_chunk(task_id, StreamFinishStep())
         await stream_registry.publish_chunk(task_id, StreamFinish())
 
         await _update_pending_operation(
@@ -1943,6 +1970,7 @@ async def _generate_llm_continuation_with_streaming(
 
         # Publish start event
         await stream_registry.publish_chunk(task_id, StreamStart(messageId=message_id))
+        await stream_registry.publish_chunk(task_id, StreamStartStep())
         await stream_registry.publish_chunk(task_id, StreamTextStart(id=text_block_id))
 
         # Stream the response
@@ -1966,6 +1994,7 @@ async def _generate_llm_continuation_with_streaming(
 
         # Publish end events
         await stream_registry.publish_chunk(task_id, StreamTextEnd(id=text_block_id))
+        await stream_registry.publish_chunk(task_id, StreamFinishStep())
 
         if assistant_content:
             # Reload session from DB to avoid race condition with user messages
@@ -2007,4 +2036,5 @@ async def _generate_llm_continuation_with_streaming(
             task_id,
             StreamError(errorText=f"Failed to generate response: {e}"),
         )
+        await stream_registry.publish_chunk(task_id, StreamFinishStep())
         await stream_registry.publish_chunk(task_id, StreamFinish())

autogpt_platform/backend/backend/api/features/chat/stream_registry.py

@@ -857,8 +857,10 @@ def _reconstruct_chunk(chunk_data: dict) -> StreamBaseResponse | None:
         ResponseType,
         StreamError,
         StreamFinish,
+        StreamFinishStep,
         StreamHeartbeat,
         StreamStart,
+        StreamStartStep,
         StreamTextDelta,
         StreamTextEnd,
         StreamTextStart,
@@ -872,6 +874,8 @@ def _reconstruct_chunk(chunk_data: dict) -> StreamBaseResponse | None:
     type_to_class: dict[str, type[StreamBaseResponse]] = {
         ResponseType.START.value: StreamStart,
         ResponseType.FINISH.value: StreamFinish,
+        ResponseType.START_STEP.value: StreamStartStep,
+        ResponseType.FINISH_STEP.value: StreamFinishStep,
         ResponseType.TEXT_START.value: StreamTextStart,
         ResponseType.TEXT_DELTA.value: StreamTextDelta,
         ResponseType.TEXT_END.value: StreamTextEnd,

autogpt_platform/backend/poetry.lock

@@ -46,14 +46,14 @@ pycares = ">=4.9.0,<5"
 
 [[package]]
 name = "aiofiles"
-version = "25.1.0"
+version = "24.1.0"
 description = "File support for asyncio."
 optional = false
-python-versions = ">=3.9"
+python-versions = ">=3.8"
 groups = ["main"]
 files = [
-    {file = "aiofiles-25.1.0-py3-none-any.whl", hash = "sha256:abe311e527c862958650f9438e859c1fa7568a141b22abcd015e120e86a85695"},
-    {file = "aiofiles-25.1.0.tar.gz", hash = "sha256:a8d728f0a29de45dc521f18f07297428d56992a742f0cd2701ba86e44d23d5b2"},
+    {file = "aiofiles-24.1.0-py3-none-any.whl", hash = "sha256:b4ec55f4195e3eb5d7abd1bf7e061763e864dd4954231fb8539a0ef8bb8260e5"},
+    {file = "aiofiles-24.1.0.tar.gz", hash = "sha256:22a075c9e5a3810f0c2e48f3008c94d68c65d763b9b03857924c99e57355166c"},
 ]
 
 [[package]]
@@ -1382,14 +1382,14 @@ tzdata = "*"
 
 [[package]]
 name = "fastapi"
-version = "0.128.5"
+version = "0.128.6"
 description = "FastAPI framework, high performance, easy to learn, fast to code, ready for production"
 optional = false
 python-versions = ">=3.9"
 groups = ["main"]
 files = [
-    {file = "fastapi-0.128.5-py3-none-any.whl", hash = "sha256:bceec0de8aa6564599c5bcc0593b0d287703562c848271fca8546fd2c87bf4dd"},
-    {file = "fastapi-0.128.5.tar.gz", hash = "sha256:a7173579fc162d6471e3c6fbd9a4b7610c7a3b367bcacf6c4f90d5d022cab711"},
+    {file = "fastapi-0.128.6-py3-none-any.whl", hash = "sha256:bb1c1ef87d6086a7132d0ab60869d6f1ee67283b20fbf84ec0003bd335099509"},
+    {file = "fastapi-0.128.6.tar.gz", hash = "sha256:0cb3946557e792d731b26a42b04912f16367e3c3135ea8290f620e234f2b604f"},
 ]
 
 [package.dependencies]
@@ -3078,14 +3078,14 @@ type = ["pygobject-stubs", "pytest-mypy (>=1.0.1)", "shtab", "types-pywin32"]
 
 [[package]]
 name = "langfuse"
-version = "3.13.0"
+version = "3.14.1"
 description = "A client library for accessing langfuse"
 optional = false
 python-versions = "<4.0,>=3.10"
 groups = ["main"]
 files = [
-    {file = "langfuse-3.13.0-py3-none-any.whl", hash = "sha256:71912ddac1cc831a65df895eae538a556f564c094ae51473e747426e9ded1a9d"},
-    {file = "langfuse-3.13.0.tar.gz", hash = "sha256:dacea8111ca4442e97dbfec4f8d676cf9709b35357a26e468f8887b95de0012f"},
+    {file = "langfuse-3.14.1-py3-none-any.whl", hash = "sha256:17bed605dbfc9947cbd1738a715f6d27c1b80b6da9f2946586171958fa5820d0"},
+    {file = "langfuse-3.14.1.tar.gz", hash = "sha256:404a6104cd29353d7829aa417ec46565b04917e5599afdda96c5b0865f4bc991"},
 ]
 
 [package.dependencies]
@@ -8440,4 +8440,4 @@ cffi = ["cffi (>=1.17,<2.0) ; platform_python_implementation != \"PyPy\" and pyt
 [metadata]
 lock-version = "2.1"
 python-versions = ">=3.10,<3.14"
-content-hash = "8b5ab34975748482dbd84de8e6a3f2970f81bd6fae782ae0f58716cb040da5c5"
+content-hash = "fc135114e01de39c8adf70f6132045e7d44a19473c1279aee0978de65aad1655"

autogpt_platform/backend/pyproject.toml

@@ -21,7 +21,7 @@ cryptography = "^46.0"
 discord-py = "^2.5.2"
 e2b-code-interpreter = "^1.5.2"
 elevenlabs = "^1.50.0"
-fastapi = "^0.128.5"
+fastapi = "^0.128.6"
 feedparser = "^6.0.11"
 flake8 = "^7.3.0"
 google-api-python-client = "^2.177.0"
@@ -34,7 +34,7 @@ html2text = "^2024.2.26"
 jinja2 = "^3.1.6"
 jsonref = "^1.1.0"
 jsonschema = "^4.25.0"
-langfuse = "^3.11.0"
+langfuse = "^3.14.1"
 launchdarkly-server-sdk = "^9.14.1"
 mem0ai = "^0.1.115"
 moviepy = "^2.1.2"
@@ -76,7 +76,7 @@ yt-dlp = "2025.12.08"
 zerobouncesdk = "^1.1.2"
 # NOTE: please insert new dependencies in their alphabetical location
 pytest-snapshot = "^0.9.0"
-aiofiles = "^25.1.0"
+aiofiles = "^24.1.0"
 tiktoken = "^0.12.0"
 aioclamd = "^1.0.0"
 setuptools = "^80.9.0"

autogpt_platform/frontend/Dockerfile

@@ -25,8 +25,12 @@ RUN if [ -f .env.production ]; then \
       cp .env.default .env; \
     fi
 RUN pnpm run generate:api
+# Disable source-map generation in Docker builds to halve webpack memory usage.
+# Source maps are only useful when SENTRY_AUTH_TOKEN is set (Vercel deploys);
+# the Docker image never uploads them, so generating them just wastes RAM.
+ENV NEXT_PUBLIC_SOURCEMAPS="false"
 # In CI, we want NEXT_PUBLIC_PW_TEST=true during build so Next.js inlines it
-RUN if [ "$NEXT_PUBLIC_PW_TEST" = "true" ]; then NEXT_PUBLIC_PW_TEST=true NODE_OPTIONS="--max-old-space-size=4096" pnpm build; else NODE_OPTIONS="--max-old-space-size=4096" pnpm build; fi
+RUN if [ "$NEXT_PUBLIC_PW_TEST" = "true" ]; then NEXT_PUBLIC_PW_TEST=true NODE_OPTIONS="--max-old-space-size=8192" pnpm build; else NODE_OPTIONS="--max-old-space-size=8192" pnpm build; fi
 
 # Prod stage - based on NextJS reference Dockerfile https://github.com/vercel/next.js/blob/64271354533ed16da51be5dce85f0dbd15f17517/examples/with-docker/Dockerfile
 FROM node:21-alpine AS prod

autogpt_platform/frontend/next.config.mjs

@@ -1,8 +1,12 @@
 import { withSentryConfig } from "@sentry/nextjs";
 
+// Allow Docker builds to skip source-map generation (halves memory usage).
+// Defaults to true so Vercel/local builds are unaffected.
+const enableSourceMaps = process.env.NEXT_PUBLIC_SOURCEMAPS !== "false";
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  productionBrowserSourceMaps: true,
+  productionBrowserSourceMaps: enableSourceMaps,
   // Externalize OpenTelemetry packages to fix Turbopack HMR issues
   serverExternalPackages: [
     "@opentelemetry/instrumentation",
@@ -14,9 +18,37 @@ const nextConfig = {
     serverActions: {
       bodySizeLimit: "256mb",
     },
-    // Increase body size limit for API routes (file uploads) - 256MB to match backend limit
-    proxyClientMaxBodySize: "256mb",
     middlewareClientMaxBodySize: "256mb",
+    // Limit parallel webpack workers to reduce peak memory during builds.
+    cpus: 2,
+  },
+  // Work around cssnano "Invalid array length" bug in Next.js's bundled
+  // cssnano-simple comment parser when processing very large CSS chunks.
+  // CSS is still bundled correctly; gzip handles most of the size savings anyway.
+  webpack: (config, { dev }) => {
+    if (!dev) {
+      // Next.js adds CssMinimizerPlugin internally (after user config), so we
+      // can't filter it from config.plugins. Instead, intercept the webpack
+      // compilation hooks and replace the buggy plugin's tap with a no-op.
+      config.plugins.push({
+        apply(compiler) {
+          compiler.hooks.compilation.tap(
+            "DisableCssMinimizer",
+            (compilation) => {
+              compilation.hooks.processAssets.intercept({
+                register: (tap) => {
+                  if (tap.name === "CssMinimizerPlugin") {
+                    return { ...tap, fn: async () => {} };
+                  }
+                  return tap;
+                },
+              });
+            },
+          );
+        },
+      });
+    }
+    return config;
   },
   images: {
     domains: [
@@ -54,9 +86,16 @@ const nextConfig = {
   transpilePackages: ["geist"],
 };
 
-const isDevelopmentBuild = process.env.NODE_ENV !== "production";
+// Only run the Sentry webpack plugin when we can actually upload source maps
+// (i.e. on Vercel with SENTRY_AUTH_TOKEN set). The Sentry *runtime* SDK
+// (imported in app code) still captures errors without the plugin.
+// Skipping the plugin saves ~1 GB of peak memory during `next build`.
+const skipSentryPlugin =
+  process.env.NODE_ENV !== "production" ||
+  !enableSourceMaps ||
+  !process.env.SENTRY_AUTH_TOKEN;
 
-export default isDevelopmentBuild
+export default skipSentryPlugin
   ? nextConfig
   : withSentryConfig(nextConfig, {
       // For all available options, see:
@@ -96,7 +135,7 @@ export default isDevelopmentBuild
 
       // This helps Sentry with sourcemaps... https://docs.sentry.io/platforms/javascript/guides/nextjs/sourcemaps/
       sourcemaps: {
-        disable: false,
+        disable: !enableSourceMaps,
         assets: [".next/**/*.js", ".next/**/*.js.map"],
         ignore: ["**/node_modules/**"],
         deleteSourcemapsAfterUpload: false, // Source is public anyway :)

autogpt_platform/frontend/package.json

@@ -7,7 +7,7 @@
   },
   "scripts": {
     "dev": "pnpm run generate:api:force && next dev --turbo",
-    "build": "next build",
+    "build": "cross-env NODE_OPTIONS=--max-old-space-size=16384 next build",
     "start": "next start",
     "start:standalone": "cd .next/standalone && node server.js",
     "lint": "next lint && prettier --check .",
@@ -30,6 +30,7 @@
     "defaults"
   ],
   "dependencies": {
+    "@ai-sdk/react": "3.0.61",
     "@faker-js/faker": "10.0.0",
     "@hookform/resolvers": "5.2.2",
     "@next/third-parties": "15.4.6",
@@ -60,6 +61,10 @@
     "@rjsf/utils": "6.1.2",
     "@rjsf/validator-ajv8": "6.1.2",
     "@sentry/nextjs": "10.27.0",
+    "@streamdown/cjk": "1.0.1",
+    "@streamdown/code": "1.0.1",
+    "@streamdown/math": "1.0.1",
+    "@streamdown/mermaid": "1.0.1",
     "@supabase/ssr": "0.7.0",
     "@supabase/supabase-js": "2.78.0",
     "@tanstack/react-query": "5.90.6",
@@ -68,6 +73,7 @@
     "@vercel/analytics": "1.5.0",
     "@vercel/speed-insights": "1.2.0",
     "@xyflow/react": "12.9.2",
+    "ai": "6.0.59",
     "boring-avatars": "1.11.2",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
@@ -87,7 +93,6 @@
     "launchdarkly-react-client-sdk": "3.9.0",
     "lodash": "4.17.21",
     "lucide-react": "0.552.0",
-    "moment": "2.30.1",
     "next": "15.4.10",
     "next-themes": "0.4.6",
     "nuqs": "2.7.2",
@@ -112,9 +117,11 @@
     "remark-math": "6.0.0",
     "shepherd.js": "14.5.1",
     "sonner": "2.0.7",
+    "streamdown": "2.1.0",
     "tailwind-merge": "2.6.0",
     "tailwind-scrollbar": "3.1.0",
     "tailwindcss-animate": "1.0.7",
+    "use-stick-to-bottom": "1.1.2",
     "uuid": "11.1.0",
     "vaul": "1.1.2",
     "zod": "3.25.76",
@@ -172,7 +179,8 @@
   },
   "pnpm": {
     "overrides": {
-      "@opentelemetry/instrumentation": "0.209.0"
+      "@opentelemetry/instrumentation": "0.209.0",
+      "lodash-es": "4.17.23"
     }
   },
   "packageManager": "pnpm@10.20.0+sha512.cf9998222162dd85864d0a8102e7892e7ba4ceadebbf5a31f9c2fce48dfce317a9c53b9f6464d1ef9042cba2e02ae02a9f7c143a2b438cd93c91840f0192b9dd"

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/BlockMenuSearchBar/useBlockMenuSearchBar.ts

@@ -1,4 +1,4 @@
-import { debounce } from "lodash";
+import debounce from "lodash/debounce";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useBlockMenuStore } from "../../../../stores/blockMenuStore";
 import { getQueryClient } from "@/lib/react-query/queryClient";

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewBlockMenu/HorizontalScroll.tsx

@@ -70,10 +70,10 @@ export const HorizontalScroll: React.FC<HorizontalScrollAreaProps> = ({
           {children}
         </div>
         {canScrollLeft && (
-          <div className="pointer-events-none absolute inset-y-0 left-0 w-8 bg-gradient-to-r from-white via-white/80 to-white/0" />
+          <div className="pointer-events-none absolute inset-y-0 left-0 w-8 bg-gradient-to-r from-background via-background/80 to-background/0" />
         )}
         {canScrollRight && (
-          <div className="pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-white via-white/80 to-white/0" />
+          <div className="pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-background via-background/80 to-background/0" />
         )}
         {canScrollLeft && (
           <button

autogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { SidebarProvider } from "@/components/ui/sidebar";
+import { ChatContainer } from "./components/ChatContainer/ChatContainer";
+import { ChatSidebar } from "./components/ChatSidebar/ChatSidebar";
+import { MobileDrawer } from "./components/MobileDrawer/MobileDrawer";
+import { MobileHeader } from "./components/MobileHeader/MobileHeader";
+import { ScaleLoader } from "./components/ScaleLoader/ScaleLoader";
+import { useCopilotPage } from "./useCopilotPage";
+
+export function CopilotPage() {
+  const {
+    sessionId,
+    messages,
+    status,
+    error,
+    stop,
+    createSession,
+    onSend,
+    isLoadingSession,
+    isCreatingSession,
+    isUserLoading,
+    isLoggedIn,
+    // Mobile drawer
+    isMobile,
+    isDrawerOpen,
+    sessions,
+    isLoadingSessions,
+    handleOpenDrawer,
+    handleCloseDrawer,
+    handleDrawerOpenChange,
+    handleSelectSession,
+    handleNewChat,
+  } = useCopilotPage();
+
+  if (isUserLoading || !isLoggedIn) {
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-[#f8f8f9]">
+        <ScaleLoader className="text-neutral-400" />
+      </div>
+    );
+  }
+
+  return (
+    <SidebarProvider
+      defaultOpen={true}
+      className="h-[calc(100vh-72px)] min-h-0"
+    >
+      {!isMobile && <ChatSidebar />}
+      <div className="relative flex h-full w-full flex-col overflow-hidden bg-[#f8f8f9] px-0">
+        {isMobile && <MobileHeader onOpenDrawer={handleOpenDrawer} />}
+        <div className="flex-1 overflow-hidden">
+          <ChatContainer
+            messages={messages}
+            status={status}
+            error={error}
+            sessionId={sessionId}
+            isLoadingSession={isLoadingSession}
+            isCreatingSession={isCreatingSession}
+            onCreateSession={createSession}
+            onSend={onSend}
+            onStop={stop}
+          />
+        </div>
+      </div>
+      {isMobile && (
+        <MobileDrawer
+          isOpen={isDrawerOpen}
+          sessions={sessions}
+          currentSessionId={sessionId}
+          isLoading={isLoadingSessions}
+          onSelectSession={handleSelectSession}
+          onNewChat={handleNewChat}
+          onClose={handleCloseDrawer}
+          onOpenChange={handleDrawerOpenChange}
+        />
+      )}
+    </SidebarProvider>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatContainer/ChatContainer.tsx

@@ -0,0 +1,74 @@
+"use client";
+import { ChatInput } from "@/app/(platform)/copilot/components/ChatInput/ChatInput";
+import { UIDataTypes, UIMessage, UITools } from "ai";
+import { LayoutGroup, motion } from "framer-motion";
+import { ChatMessagesContainer } from "../ChatMessagesContainer/ChatMessagesContainer";
+import { CopilotChatActionsProvider } from "../CopilotChatActionsProvider/CopilotChatActionsProvider";
+import { EmptySession } from "../EmptySession/EmptySession";
+
+export interface ChatContainerProps {
+  messages: UIMessage<unknown, UIDataTypes, UITools>[];
+  status: string;
+  error: Error | undefined;
+  sessionId: string | null;
+  isLoadingSession: boolean;
+  isCreatingSession: boolean;
+  onCreateSession: () => void | Promise<string>;
+  onSend: (message: string) => void | Promise<void>;
+  onStop: () => void;
+}
+export const ChatContainer = ({
+  messages,
+  status,
+  error,
+  sessionId,
+  isLoadingSession,
+  isCreatingSession,
+  onCreateSession,
+  onSend,
+  onStop,
+}: ChatContainerProps) => {
+  const inputLayoutId = "copilot-2-chat-input";
+
+  return (
+    <CopilotChatActionsProvider onSend={onSend}>
+      <LayoutGroup id="copilot-2-chat-layout">
+        <div className="flex h-full min-h-0 w-full flex-col bg-[#f8f8f9] px-2 lg:px-0">
+          {sessionId ? (
+            <div className="mx-auto flex h-full min-h-0 w-full max-w-3xl flex-col">
+              <ChatMessagesContainer
+                messages={messages}
+                status={status}
+                error={error}
+                isLoading={isLoadingSession}
+              />
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ duration: 0.3 }}
+                className="relative px-3 pb-2 pt-2"
+              >
+                <div className="pointer-events-none absolute left-0 right-0 top-[-18px] z-10 h-6 bg-gradient-to-b from-transparent to-[#f8f8f9]" />
+                <ChatInput
+                  inputId="chat-input-session"
+                  onSend={onSend}
+                  disabled={status === "streaming"}
+                  isStreaming={status === "streaming"}
+                  onStop={onStop}
+                  placeholder="What else can I help with?"
+                />
+              </motion.div>
+            </div>
+          ) : (
+            <EmptySession
+              inputLayoutId={inputLayoutId}
+              isCreatingSession={isCreatingSession}
+              onCreateSession={onCreateSession}
+              onSend={onSend}
+            />
+          )}
+        </div>
+      </LayoutGroup>
+    </CopilotChatActionsProvider>
+  );
+};

autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/ChatInput.tsx

@@ -6,17 +6,19 @@ import {
   MicrophoneIcon,
   StopIcon,
 } from "@phosphor-icons/react";
+import { ChangeEvent, useCallback } from "react";
 import { RecordingIndicator } from "./components/RecordingIndicator";
 import { useChatInput } from "./useChatInput";
 import { useVoiceRecording } from "./useVoiceRecording";
 
 export interface Props {
-  onSend: (message: string) => void;
+  onSend: (message: string) => void | Promise<void>;
   disabled?: boolean;
   isStreaming?: boolean;
   onStop?: () => void;
   placeholder?: string;
   className?: string;
+  inputId?: string;
 }
 
 export function ChatInput({
@@ -26,14 +28,14 @@ export function ChatInput({
   onStop,
   placeholder = "Type your message...",
   className,
+  inputId = "chat-input",
 }: Props) {
-  const inputId = "chat-input";
   const {
     value,
     setValue,
     handleKeyDown: baseHandleKeyDown,
     handleSubmit,
-    handleChange,
+    handleChange: baseHandleChange,
     hasMultipleLines,
   } = useChatInput({
     onSend,
@@ -60,6 +62,15 @@ export function ChatInput({
     inputId,
   });
 
+  // Block text changes when recording
+  const handleChange = useCallback(
+    (e: ChangeEvent<HTMLTextAreaElement>) => {
+      if (isRecording) return;
+      baseHandleChange(e);
+    },
+    [isRecording, baseHandleChange],
+  );
+
   return (
     <form onSubmit={handleSubmit} className={cn("relative flex-1", className)}>
       <div className="relative">

autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/useChatInput.ts

@@ -21,6 +21,7 @@ export function useChatInput({
 }: Args) {
   const [value, setValue] = useState("");
   const [hasMultipleLines, setHasMultipleLines] = useState(false);
+  const [isSending, setIsSending] = useState(false);
 
   useEffect(
     function focusOnMount() {
@@ -100,34 +101,40 @@ export function useChatInput({
     }
   }, [value, maxRows, inputId]);
 
-  const handleSend = () => {
-    if (disabled || !value.trim()) return;
-    onSend(value.trim());
-    setValue("");
-    setHasMultipleLines(false);
-    const textarea = document.getElementById(inputId) as HTMLTextAreaElement;
-    const wrapper = document.getElementById(
-      `${inputId}-wrapper`,
-    ) as HTMLDivElement;
-    if (textarea) {
-      textarea.style.height = "auto";
+  async function handleSend() {
+    if (disabled || isSending || !value.trim()) return;
+
+    setIsSending(true);
+    try {
+      await onSend(value.trim());
+      setValue("");
+      setHasMultipleLines(false);
+      const textarea = document.getElementById(inputId) as HTMLTextAreaElement;
+      const wrapper = document.getElementById(
+        `${inputId}-wrapper`,
+      ) as HTMLDivElement;
+      if (textarea) {
+        textarea.style.height = "auto";
+      }
+      if (wrapper) {
+        wrapper.style.height = "";
+        wrapper.style.maxHeight = "";
+      }
+    } finally {
+      setIsSending(false);
     }
-    if (wrapper) {
-      wrapper.style.height = "";
-      wrapper.style.maxHeight = "";
-    }
-  };
+  }
 
   function handleKeyDown(event: KeyboardEvent<HTMLTextAreaElement>) {
     if (event.key === "Enter" && !event.shiftKey) {
       event.preventDefault();
-      handleSend();
+      void handleSend();
     }
   }
 
   function handleSubmit(e: FormEvent<HTMLFormElement>) {
     e.preventDefault();
-    handleSend();
+    void handleSend();
   }
 
   function handleChange(e: ChangeEvent<HTMLTextAreaElement>) {
@@ -142,5 +149,6 @@ export function useChatInput({
     handleSubmit,
     handleChange,
     hasMultipleLines,
+    isSending,
   };
 }

autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/useVoiceRecording.ts

@@ -38,9 +38,13 @@ export function useVoiceRecording({
   const streamRef = useRef<MediaStream | null>(null);
   const isRecordingRef = useRef(false);
 
-  const isSupported =
-    typeof window !== "undefined" &&
-    !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia);
+  const [isSupported, setIsSupported] = useState(false);
+
+  useEffect(() => {
+    setIsSupported(
+      !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia),
+    );
+  }, []);
 
   const clearTimer = useCallback(() => {
     if (timerRef.current) {
@@ -214,17 +218,33 @@ export function useVoiceRecording({
 
   const handleKeyDown = useCallback(
     (event: KeyboardEvent<HTMLTextAreaElement>) => {
-      if (event.key === " " && !value.trim() && !isTranscribing) {
+      // Allow space to toggle recording (start when empty, stop when recording)
+      if (event.key === " " && !isTranscribing) {
+        if (isRecordingRef.current) {
+          // Stop recording on space
+          event.preventDefault();
+          stopRecording();
+          return;
+        } else if (!value.trim()) {
+          // Start recording on space when input is empty
+          event.preventDefault();
+          void startRecording();
+          return;
+        }
+      }
+      // Block all key events when recording (except space handled above)
+      if (isRecordingRef.current) {
         event.preventDefault();
-        toggleRecording();
         return;
       }
       baseHandleKeyDown(event);
     },
-    [value, isTranscribing, toggleRecording, baseHandleKeyDown],
+    [value, isTranscribing, stopRecording, startRecording, baseHandleKeyDown],
   );
 
   const showMicButton = isSupported;
+  // Don't include isRecording in disabled state - we need key events to work
+  // Text input is blocked via handleKeyDown instead
   const isInputDisabled = disabled || isStreaming || isTranscribing;
 
   // Cleanup on unmount

autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatMessagesContainer/ChatMessagesContainer.tsx

@@ -0,0 +1,274 @@
+import { getGetWorkspaceDownloadFileByIdUrl } from "@/app/api/__generated__/endpoints/workspace/workspace";
+import {
+  Conversation,
+  ConversationContent,
+  ConversationScrollButton,
+} from "@/components/ai-elements/conversation";
+import {
+  Message,
+  MessageContent,
+  MessageResponse,
+} from "@/components/ai-elements/message";
+import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
+import { ToolUIPart, UIDataTypes, UIMessage, UITools } from "ai";
+import { useEffect, useState } from "react";
+import { CreateAgentTool } from "../../tools/CreateAgent/CreateAgent";
+import { EditAgentTool } from "../../tools/EditAgent/EditAgent";
+import { FindAgentsTool } from "../../tools/FindAgents/FindAgents";
+import { FindBlocksTool } from "../../tools/FindBlocks/FindBlocks";
+import { RunAgentTool } from "../../tools/RunAgent/RunAgent";
+import { RunBlockTool } from "../../tools/RunBlock/RunBlock";
+import { SearchDocsTool } from "../../tools/SearchDocs/SearchDocs";
+import { ViewAgentOutputTool } from "../../tools/ViewAgentOutput/ViewAgentOutput";
+
+// ---------------------------------------------------------------------------
+// Workspace media support
+// ---------------------------------------------------------------------------
+
+/**
+ * Resolve workspace:// URLs in markdown text to proxy download URLs.
+ * Detects MIME type from the hash fragment (e.g. workspace://id#video/mp4)
+ * and prefixes the alt text with "video:" so the custom img component can
+ * render a <video> element instead.
+ */
+function resolveWorkspaceUrls(text: string): string {
+  return text.replace(
+    /!\[([^\]]*)\]\(workspace:\/\/([^)#\s]+)(?:#([^)\s]*))?\)/g,
+    (_match, alt: string, fileId: string, mimeHint?: string) => {
+      const apiPath = getGetWorkspaceDownloadFileByIdUrl(fileId);
+      const url = `/api/proxy${apiPath}`;
+      if (mimeHint?.startsWith("video/")) {
+        return `![video:${alt || "Video"}](${url})`;
+      }
+      return `![${alt || "Image"}](${url})`;
+    },
+  );
+}
+
+/**
+ * Custom img component for Streamdown that renders <video> elements
+ * for workspace video files (detected via "video:" alt-text prefix).
+ * Falls back to <video> when an <img> fails to load for workspace files.
+ */
+function WorkspaceMediaImage(props: React.JSX.IntrinsicElements["img"]) {
+  const { src, alt, ...rest } = props;
+  const [imgFailed, setImgFailed] = useState(false);
+  const isWorkspace = src?.includes("/workspace/files/") ?? false;
+
+  if (!src) return null;
+
+  if (alt?.startsWith("video:") || (imgFailed && isWorkspace)) {
+    return (
+      <span className="my-2 inline-block">
+        <video
+          controls
+          className="h-auto max-w-full rounded-md border border-zinc-200"
+          preload="metadata"
+        >
+          <source src={src} />
+          Your browser does not support the video tag.
+        </video>
+      </span>
+    );
+  }
+
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={src}
+      alt={alt || "Image"}
+      className="h-auto max-w-full rounded-md border border-zinc-200"
+      loading="lazy"
+      onError={() => {
+        if (isWorkspace) setImgFailed(true);
+      }}
+      {...rest}
+    />
+  );
+}
+
+/** Stable components override for Streamdown (avoids re-creating on every render). */
+const STREAMDOWN_COMPONENTS = { img: WorkspaceMediaImage };
+
+const THINKING_PHRASES = [
+  "Thinking...",
+  "Considering this...",
+  "Working through this...",
+  "Analyzing your request...",
+  "Reasoning...",
+  "Looking into it...",
+  "Processing your request...",
+  "Mulling this over...",
+  "Piecing it together...",
+  "On it...",
+];
+
+function getRandomPhrase() {
+  return THINKING_PHRASES[Math.floor(Math.random() * THINKING_PHRASES.length)];
+}
+
+interface ChatMessagesContainerProps {
+  messages: UIMessage<unknown, UIDataTypes, UITools>[];
+  status: string;
+  error: Error | undefined;
+  isLoading: boolean;
+}
+
+export const ChatMessagesContainer = ({
+  messages,
+  status,
+  error,
+  isLoading,
+}: ChatMessagesContainerProps) => {
+  const [thinkingPhrase, setThinkingPhrase] = useState(getRandomPhrase);
+
+  useEffect(() => {
+    if (status === "submitted") {
+      setThinkingPhrase(getRandomPhrase());
+    }
+  }, [status]);
+
+  const lastMessage = messages[messages.length - 1];
+  const lastAssistantHasVisibleContent =
+    lastMessage?.role === "assistant" &&
+    lastMessage.parts.some(
+      (p) =>
+        (p.type === "text" && p.text.trim().length > 0) ||
+        p.type.startsWith("tool-"),
+    );
+
+  const showThinking =
+    status === "submitted" ||
+    (status === "streaming" && !lastAssistantHasVisibleContent);
+
+  return (
+    <Conversation className="min-h-0 flex-1">
+      <ConversationContent className="flex min-h-screen flex-1 flex-col gap-6 px-3 py-6">
+        {isLoading && messages.length === 0 && (
+          <div className="flex min-h-full flex-1 items-center justify-center">
+            <LoadingSpinner className="text-neutral-600" />
+          </div>
+        )}
+        {messages.map((message, messageIndex) => {
+          const isLastAssistant =
+            messageIndex === messages.length - 1 &&
+            message.role === "assistant";
+          const messageHasVisibleContent = message.parts.some(
+            (p) =>
+              (p.type === "text" && p.text.trim().length > 0) ||
+              p.type.startsWith("tool-"),
+          );
+
+          return (
+            <Message from={message.role} key={message.id}>
+              <MessageContent
+                className={
+                  "text-[1rem] leading-relaxed " +
+                  "group-[.is-user]:rounded-xl group-[.is-user]:bg-purple-100 group-[.is-user]:px-3 group-[.is-user]:py-2.5 group-[.is-user]:text-slate-900 group-[.is-user]:[border-bottom-right-radius:0] " +
+                  "group-[.is-assistant]:bg-transparent group-[.is-assistant]:text-slate-900"
+                }
+              >
+                {message.parts.map((part, i) => {
+                  switch (part.type) {
+                    case "text":
+                      return (
+                        <MessageResponse
+                          key={`${message.id}-${i}`}
+                          components={STREAMDOWN_COMPONENTS}
+                        >
+                          {resolveWorkspaceUrls(part.text)}
+                        </MessageResponse>
+                      );
+                    case "tool-find_block":
+                      return (
+                        <FindBlocksTool
+                          key={`${message.id}-${i}`}
+                          part={part as ToolUIPart}
+                        />
+                      );
+                    case "tool-find_agent":
+                    case "tool-find_library_agent":
+                      return (
+                        <FindAgentsTool
+                          key={`${message.id}-${i}`}
+                          part={part as ToolUIPart}
+                        />
+                      );
+                    case "tool-search_docs":
+                    case "tool-get_doc_page":
+                      return (
+                        <SearchDocsTool
+                          key={`${message.id}-${i}`}
+                          part={part as ToolUIPart}
+                        />
+                      );
+                    case "tool-run_block":
+                      return (
+                        <RunBlockTool
+                          key={`${message.id}-${i}`}
+                          part={part as ToolUIPart}
+                        />
+                      );
+                    case "tool-run_agent":
+                    case "tool-schedule_agent":
+                      return (
+                        <RunAgentTool
+                          key={`${message.id}-${i}`}
+                          part={part as ToolUIPart}
+                        />
+                      );
+                    case "tool-create_agent":
+                      return (
+                        <CreateAgentTool
+                          key={`${message.id}-${i}`}
+                          part={part as ToolUIPart}
+                        />
+                      );
+                    case "tool-edit_agent":
+                      return (
+                        <EditAgentTool
+                          key={`${message.id}-${i}`}
+                          part={part as ToolUIPart}
+                        />
+                      );
+                    case "tool-view_agent_output":
+                      return (
+                        <ViewAgentOutputTool
+                          key={`${message.id}-${i}`}
+                          part={part as ToolUIPart}
+                        />
+                      );
+                    default:
+                      return null;
+                  }
+                })}
+                {isLastAssistant &&
+                  !messageHasVisibleContent &&
+                  showThinking && (
+                    <span className="inline-block animate-shimmer bg-gradient-to-r from-neutral-400 via-neutral-600 to-neutral-400 bg-[length:200%_100%] bg-clip-text text-transparent">
+                      {thinkingPhrase}
+                    </span>
+                  )}
+              </MessageContent>
+            </Message>
+          );
+        })}
+        {showThinking && lastMessage?.role !== "assistant" && (
+          <Message from="assistant">
+            <MessageContent className="text-[1rem] leading-relaxed">
+              <span className="inline-block animate-shimmer bg-gradient-to-r from-neutral-400 via-neutral-600 to-neutral-400 bg-[length:200%_100%] bg-clip-text text-transparent">
+                {thinkingPhrase}
+              </span>
+            </MessageContent>
+          </Message>
+        )}
+        {error && (
+          <div className="rounded-lg bg-red-50 p-3 text-red-600">
+            Error: {error.message}
+          </div>
+        )}
+      </ConversationContent>
+      <ConversationScrollButton />
+    </Conversation>
+  );
+};

autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatSidebar/ChatSidebar.tsx

@@ -0,0 +1,188 @@
+"use client";
+import { useGetV2ListSessions } from "@/app/api/__generated__/endpoints/chat/chat";
+import { Button } from "@/components/atoms/Button/Button";
+import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
+import { Text } from "@/components/atoms/Text/Text";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarTrigger,
+  useSidebar,
+} from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+import { PlusCircleIcon, PlusIcon } from "@phosphor-icons/react";
+import { motion } from "framer-motion";
+import { parseAsString, useQueryState } from "nuqs";
+
+export function ChatSidebar() {
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  const [sessionId, setSessionId] = useQueryState("sessionId", parseAsString);
+
+  const { data: sessionsResponse, isLoading: isLoadingSessions } =
+    useGetV2ListSessions({ limit: 50 });
+
+  const sessions =
+    sessionsResponse?.status === 200 ? sessionsResponse.data.sessions : [];
+
+  function handleNewChat() {
+    setSessionId(null);
+  }
+
+  function handleSelectSession(id: string) {
+    setSessionId(id);
+  }
+
+  function formatDate(dateString: string) {
+    const date = new Date(dateString);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+
+    if (diffDays === 0) return "Today";
+    if (diffDays === 1) return "Yesterday";
+    if (diffDays < 7) return `${diffDays} days ago`;
+
+    const day = date.getDate();
+    const ordinal =
+      day % 10 === 1 && day !== 11
+        ? "st"
+        : day % 10 === 2 && day !== 12
+          ? "nd"
+          : day % 10 === 3 && day !== 13
+            ? "rd"
+            : "th";
+    const month = date.toLocaleDateString("en-US", { month: "short" });
+    const year = date.getFullYear();
+
+    return `${day}${ordinal} ${month} ${year}`;
+  }
+
+  return (
+    <Sidebar
+      variant="inset"
+      collapsible="icon"
+      className="!top-[50px] !h-[calc(100vh-50px)] border-r border-zinc-100 px-0"
+    >
+      {isCollapsed && (
+        <SidebarHeader
+          className={cn(
+            "flex",
+            isCollapsed
+              ? "flex-row items-center justify-between gap-y-4 md:flex-col md:items-start md:justify-start"
+              : "flex-row items-center justify-between",
+          )}
+        >
+          <motion.div
+            key={isCollapsed ? "header-collapsed" : "header-expanded"}
+            className="flex flex-col items-center gap-3 pt-4"
+            initial={{ opacity: 0, filter: "blur(3px)" }}
+            animate={{ opacity: 1, filter: "blur(0px)" }}
+            transition={{ type: "spring", bounce: 0.2 }}
+          >
+            <div className="flex flex-col items-center gap-2">
+              <SidebarTrigger />
+              <Button
+                variant="ghost"
+                onClick={handleNewChat}
+                style={{ minWidth: "auto", width: "auto" }}
+              >
+                <PlusCircleIcon className="!size-5" />
+                <span className="sr-only">New Chat</span>
+              </Button>
+            </div>
+          </motion.div>
+        </SidebarHeader>
+      )}
+      <SidebarContent className="gap-4 overflow-y-auto px-4 py-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+        {!isCollapsed && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.2, delay: 0.1 }}
+            className="flex items-center justify-between px-3"
+          >
+            <Text variant="h3" size="body-medium">
+              Your chats
+            </Text>
+            <div className="relative left-6">
+              <SidebarTrigger />
+            </div>
+          </motion.div>
+        )}
+
+        {!isCollapsed && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.2, delay: 0.15 }}
+            className="mt-4 flex flex-col gap-1"
+          >
+            {isLoadingSessions ? (
+              <div className="flex min-h-[30rem] items-center justify-center py-4">
+                <LoadingSpinner size="small" className="text-neutral-600" />
+              </div>
+            ) : sessions.length === 0 ? (
+              <p className="py-4 text-center text-sm text-neutral-500">
+                No conversations yet
+              </p>
+            ) : (
+              sessions.map((session) => (
+                <button
+                  key={session.id}
+                  onClick={() => handleSelectSession(session.id)}
+                  className={cn(
+                    "w-full rounded-lg px-3 py-2.5 text-left transition-colors",
+                    session.id === sessionId
+                      ? "bg-zinc-100"
+                      : "hover:bg-zinc-50",
+                  )}
+                >
+                  <div className="flex min-w-0 max-w-full flex-col overflow-hidden">
+                    <div className="min-w-0 max-w-full">
+                      <Text
+                        variant="body"
+                        className={cn(
+                          "truncate font-normal",
+                          session.id === sessionId
+                            ? "text-zinc-600"
+                            : "text-zinc-800",
+                        )}
+                      >
+                        {session.title || `Untitled chat`}
+                      </Text>
+                    </div>
+                    <Text variant="small" className="text-neutral-400">
+                      {formatDate(session.updated_at)}
+                    </Text>
+                  </div>
+                </button>
+              ))
+            )}
+          </motion.div>
+        )}
+      </SidebarContent>
+      {!isCollapsed && sessionId && (
+        <SidebarFooter className="shrink-0 bg-zinc-50 p-3 pb-1 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.2, delay: 0.2 }}
+          >
+            <Button
+              variant="primary"
+              size="small"
+              onClick={handleNewChat}
+              className="w-full"
+              leftIcon={<PlusIcon className="h-4 w-4" weight="bold" />}
+            >
+              New Chat
+            </Button>
+          </motion.div>
+        </SidebarFooter>
+      )}
+    </Sidebar>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot/components/CopilotChatActionsProvider/CopilotChatActionsProvider.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { CopilotChatActionsContext } from "./useCopilotChatActions";
+
+interface Props {
+  onSend: (message: string) => void | Promise<void>;
+  children: React.ReactNode;
+}
+
+export function CopilotChatActionsProvider({ onSend, children }: Props) {
+  return (
+    <CopilotChatActionsContext.Provider value={{ onSend }}>
+      {children}
+    </CopilotChatActionsContext.Provider>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot/components/CopilotChatActionsProvider/useCopilotChatActions.ts

@@ -0,0 +1,23 @@
+"use client";
+
+import { createContext, useContext } from "react";
+
+interface CopilotChatActions {
+  onSend: (message: string) => void | Promise<void>;
+}
+
+const CopilotChatActionsContext = createContext<CopilotChatActions | null>(
+  null,
+);
+
+export function useCopilotChatActions(): CopilotChatActions {
+  const ctx = useContext(CopilotChatActionsContext);
+  if (!ctx) {
+    throw new Error(
+      "useCopilotChatActions must be used within CopilotChatActionsProvider",
+    );
+  }
+  return ctx;
+}
+
+export { CopilotChatActionsContext };

autogpt_platform/frontend/src/app/(platform)/copilot/components/CopilotShell/CopilotShell.tsx

@@ -1,99 +0,0 @@
-"use client";
-
-import { ChatLoader } from "@/components/contextual/Chat/components/ChatLoader/ChatLoader";
-import { Text } from "@/components/atoms/Text/Text";
-import { NAVBAR_HEIGHT_PX } from "@/lib/constants";
-import type { ReactNode } from "react";
-import { DesktopSidebar } from "./components/DesktopSidebar/DesktopSidebar";
-import { MobileDrawer } from "./components/MobileDrawer/MobileDrawer";
-import { MobileHeader } from "./components/MobileHeader/MobileHeader";
-import { useCopilotShell } from "./useCopilotShell";
-
-interface Props {
-  children: ReactNode;
-}
-
-export function CopilotShell({ children }: Props) {
-  const {
-    isMobile,
-    isDrawerOpen,
-    isLoading,
-    isCreatingSession,
-    isLoggedIn,
-    hasActiveSession,
-    sessions,
-    currentSessionId,
-    handleOpenDrawer,
-    handleCloseDrawer,
-    handleDrawerOpenChange,
-    handleNewChatClick,
-    handleSessionClick,
-    hasNextPage,
-    isFetchingNextPage,
-    fetchNextPage,
-  } = useCopilotShell();
-
-  if (!isLoggedIn) {
-    return (
-      <div className="flex h-full items-center justify-center">
-        <ChatLoader />
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className="flex overflow-hidden bg-[#EFEFF0]"
-      style={{ height: `calc(100vh - ${NAVBAR_HEIGHT_PX}px)` }}
-    >
-      {!isMobile && (
-        <DesktopSidebar
-          sessions={sessions}
-          currentSessionId={currentSessionId}
-          isLoading={isLoading}
-          hasNextPage={hasNextPage}
-          isFetchingNextPage={isFetchingNextPage}
-          onSelectSession={handleSessionClick}
-          onFetchNextPage={fetchNextPage}
-          onNewChat={handleNewChatClick}
-          hasActiveSession={Boolean(hasActiveSession)}
-        />
-      )}
-
-      <div className="relative flex min-h-0 flex-1 flex-col">
-        {isMobile && <MobileHeader onOpenDrawer={handleOpenDrawer} />}
-        <div className="flex min-h-0 flex-1 flex-col">
-          {isCreatingSession ? (
-            <div className="flex h-full flex-1 flex-col items-center justify-center bg-[#f8f8f9]">
-              <div className="flex flex-col items-center gap-4">
-                <ChatLoader />
-                <Text variant="body" className="text-zinc-500">
-                  Creating your chat...
-                </Text>
-              </div>
-            </div>
-          ) : (
-            children
-          )}
-        </div>
-      </div>
-
-      {isMobile && (
-        <MobileDrawer
-          isOpen={isDrawerOpen}
-          sessions={sessions}
-          currentSessionId={currentSessionId}
-          isLoading={isLoading}
-          hasNextPage={hasNextPage}
-          isFetchingNextPage={isFetchingNextPage}
-          onSelectSession={handleSessionClick}
-          onFetchNextPage={fetchNextPage}
-          onNewChat={handleNewChatClick}
-          onClose={handleCloseDrawer}
-          onOpenChange={handleDrawerOpenChange}
-          hasActiveSession={Boolean(hasActiveSession)}
-        />
-      )}
-    </div>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/copilot/components/CopilotShell/components/DesktopSidebar/DesktopSidebar.tsx

@@ -1,70 +0,0 @@
-import type { SessionSummaryResponse } from "@/app/api/__generated__/models/sessionSummaryResponse";
-import { Button } from "@/components/atoms/Button/Button";
-import { Text } from "@/components/atoms/Text/Text";
-import { scrollbarStyles } from "@/components/styles/scrollbars";
-import { cn } from "@/lib/utils";
-import { Plus } from "@phosphor-icons/react";
-import { SessionsList } from "../SessionsList/SessionsList";
-
-interface Props {
-  sessions: SessionSummaryResponse[];
-  currentSessionId: string | null;
-  isLoading: boolean;
-  hasNextPage: boolean;
-  isFetchingNextPage: boolean;
-  onSelectSession: (sessionId: string) => void;
-  onFetchNextPage: () => void;
-  onNewChat: () => void;
-  hasActiveSession: boolean;
-}
-
-export function DesktopSidebar({
-  sessions,
-  currentSessionId,
-  isLoading,
-  hasNextPage,
-  isFetchingNextPage,
-  onSelectSession,
-  onFetchNextPage,
-  onNewChat,
-  hasActiveSession,
-}: Props) {
-  return (
-    <aside className="flex h-full w-80 flex-col border-r border-zinc-100 bg-zinc-50">
-      <div className="shrink-0 px-6 py-4">
-        <Text variant="h3" size="body-medium">
-          Your chats
-        </Text>
-      </div>
-      <div
-        className={cn(
-          "flex min-h-0 flex-1 flex-col overflow-y-auto px-3 py-3",
-          scrollbarStyles,
-        )}
-      >
-        <SessionsList
-          sessions={sessions}
-          currentSessionId={currentSessionId}
-          isLoading={isLoading}
-          hasNextPage={hasNextPage}
-          isFetchingNextPage={isFetchingNextPage}
-          onSelectSession={onSelectSession}
-          onFetchNextPage={onFetchNextPage}
-        />
-      </div>
-      {hasActiveSession && (
-        <div className="shrink-0 bg-zinc-50 p-3 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
-          <Button
-            variant="primary"
-            size="small"
-            onClick={onNewChat}
-            className="w-full"
-            leftIcon={<Plus width="1rem" height="1rem" />}
-          >
-            New Chat
-          </Button>
-        </div>
-      )}
-    </aside>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/copilot/components/CopilotShell/components/MobileDrawer/MobileDrawer.tsx

@@ -1,91 +0,0 @@
-import type { SessionSummaryResponse } from "@/app/api/__generated__/models/sessionSummaryResponse";
-import { Button } from "@/components/atoms/Button/Button";
-import { scrollbarStyles } from "@/components/styles/scrollbars";
-import { cn } from "@/lib/utils";
-import { PlusIcon, X } from "@phosphor-icons/react";
-import { Drawer } from "vaul";
-import { SessionsList } from "../SessionsList/SessionsList";
-
-interface Props {
-  isOpen: boolean;
-  sessions: SessionSummaryResponse[];
-  currentSessionId: string | null;
-  isLoading: boolean;
-  hasNextPage: boolean;
-  isFetchingNextPage: boolean;
-  onSelectSession: (sessionId: string) => void;
-  onFetchNextPage: () => void;
-  onNewChat: () => void;
-  onClose: () => void;
-  onOpenChange: (open: boolean) => void;
-  hasActiveSession: boolean;
-}
-
-export function MobileDrawer({
-  isOpen,
-  sessions,
-  currentSessionId,
-  isLoading,
-  hasNextPage,
-  isFetchingNextPage,
-  onSelectSession,
-  onFetchNextPage,
-  onNewChat,
-  onClose,
-  onOpenChange,
-  hasActiveSession,
-}: Props) {
-  return (
-    <Drawer.Root open={isOpen} onOpenChange={onOpenChange} direction="left">
-      <Drawer.Portal>
-        <Drawer.Overlay className="fixed inset-0 z-[60] bg-black/10 backdrop-blur-sm" />
-        <Drawer.Content className="fixed left-0 top-0 z-[70] flex h-full w-80 flex-col border-r border-zinc-200 bg-zinc-50">
-          <div className="shrink-0 border-b border-zinc-200 p-4">
-            <div className="flex items-center justify-between">
-              <Drawer.Title className="text-lg font-semibold text-zinc-800">
-                Your chats
-              </Drawer.Title>
-              <Button
-                variant="icon"
-                size="icon"
-                aria-label="Close sessions"
-                onClick={onClose}
-              >
-                <X width="1.25rem" height="1.25rem" />
-              </Button>
-            </div>
-          </div>
-          <div
-            className={cn(
-              "flex min-h-0 flex-1 flex-col overflow-y-auto px-3 py-3",
-              scrollbarStyles,
-            )}
-          >
-            <SessionsList
-              sessions={sessions}
-              currentSessionId={currentSessionId}
-              isLoading={isLoading}
-              hasNextPage={hasNextPage}
-              isFetchingNextPage={isFetchingNextPage}
-              onSelectSession={onSelectSession}
-              onFetchNextPage={onFetchNextPage}
-            />
-          </div>
-          {hasActiveSession && (
-            <div className="shrink-0 bg-white p-3 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
-              <Button
-                variant="primary"
-                size="small"
-                onClick={onNewChat}
-                className="w-full"
-                leftIcon={<PlusIcon width="1rem" height="1rem" />}
-              >
-                New Chat
-              </Button>
-            </div>
-          )}
-        </Drawer.Content>
-      </Drawer.Portal>
-    </Drawer.Root>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/copilot/components/CopilotShell/components/MobileDrawer/useMobileDrawer.ts

@@ -1,24 +0,0 @@
-import { useState } from "react";
-
-export function useMobileDrawer() {
-  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
-
-  const handleOpenDrawer = () => {
-    setIsDrawerOpen(true);
-  };
-
-  const handleCloseDrawer = () => {
-    setIsDrawerOpen(false);
-  };
-
-  const handleDrawerOpenChange = (open: boolean) => {
-    setIsDrawerOpen(open);
-  };
-
-  return {
-    isDrawerOpen,
-    handleOpenDrawer,
-    handleCloseDrawer,
-    handleDrawerOpenChange,
-  };
-}

autogpt_platform/frontend/src/app/(platform)/copilot/components/CopilotShell/components/SessionsList/SessionsList.tsx

@@ -1,80 +0,0 @@
-import type { SessionSummaryResponse } from "@/app/api/__generated__/models/sessionSummaryResponse";
-import { Skeleton } from "@/components/__legacy__/ui/skeleton";
-import { Text } from "@/components/atoms/Text/Text";
-import { InfiniteList } from "@/components/molecules/InfiniteList/InfiniteList";
-import { cn } from "@/lib/utils";
-import { getSessionTitle } from "../../helpers";
-
-interface Props {
-  sessions: SessionSummaryResponse[];
-  currentSessionId: string | null;
-  isLoading: boolean;
-  hasNextPage: boolean;
-  isFetchingNextPage: boolean;
-  onSelectSession: (sessionId: string) => void;
-  onFetchNextPage: () => void;
-}
-
-export function SessionsList({
-  sessions,
-  currentSessionId,
-  isLoading,
-  hasNextPage,
-  isFetchingNextPage,
-  onSelectSession,
-  onFetchNextPage,
-}: Props) {
-  if (isLoading) {
-    return (
-      <div className="space-y-1">
-        {Array.from({ length: 5 }).map((_, i) => (
-          <div key={i} className="rounded-lg px-3 py-2.5">
-            <Skeleton className="h-5 w-full" />
-          </div>
-        ))}
-      </div>
-    );
-  }
-
-  if (sessions.length === 0) {
-    return (
-      <div className="flex h-full items-center justify-center">
-        <Text variant="body" className="text-zinc-500">
-          You don&apos;t have previous chats
-        </Text>
-      </div>
-    );
-  }
-
-  return (
-    <InfiniteList
-      items={sessions}
-      hasMore={hasNextPage}
-      isFetchingMore={isFetchingNextPage}
-      onEndReached={onFetchNextPage}
-      className="space-y-1"
-      renderItem={(session) => {
-        const isActive = session.id === currentSessionId;
-        return (
-          <button
-            onClick={() => onSelectSession(session.id)}
-            className={cn(
-              "w-full rounded-lg px-3 py-2.5 text-left transition-colors",
-              isActive ? "bg-zinc-100" : "hover:bg-zinc-50",
-            )}
-          >
-            <Text
-              variant="body"
-              className={cn(
-                "font-normal",
-                isActive ? "text-zinc-600" : "text-zinc-800",
-              )}
-            >
-              {getSessionTitle(session)}
-            </Text>
-          </button>
-        );
-      }}
-    />
-  );
-}

autogpt_platform/frontend/src/app/(platform)/copilot/components/CopilotShell/components/SessionsList/useSessionsPagination.ts

@@ -1,91 +0,0 @@
-import { useGetV2ListSessions } from "@/app/api/__generated__/endpoints/chat/chat";
-import type { SessionSummaryResponse } from "@/app/api/__generated__/models/sessionSummaryResponse";
-import { okData } from "@/app/api/helpers";
-import { useEffect, useState } from "react";
-
-const PAGE_SIZE = 50;
-
-export interface UseSessionsPaginationArgs {
-  enabled: boolean;
-}
-
-export function useSessionsPagination({ enabled }: UseSessionsPaginationArgs) {
-  const [offset, setOffset] = useState(0);
-
-  const [accumulatedSessions, setAccumulatedSessions] = useState<
-    SessionSummaryResponse[]
-  >([]);
-
-  const [totalCount, setTotalCount] = useState<number | null>(null);
-
-  const { data, isLoading, isFetching, isError } = useGetV2ListSessions(
-    { limit: PAGE_SIZE, offset },
-    {
-      query: {
-        enabled: enabled && offset >= 0,
-      },
-    },
-  );
-
-  useEffect(() => {
-    const responseData = okData(data);
-    if (responseData) {
-      const newSessions = responseData.sessions;
-      const total = responseData.total;
-      setTotalCount(total);
-
-      if (offset === 0) {
-        setAccumulatedSessions(newSessions);
-      } else {
-        setAccumulatedSessions((prev) => [...prev, ...newSessions]);
-      }
-    } else if (!enabled) {
-      setAccumulatedSessions([]);
-      setTotalCount(null);
-    }
-  }, [data, offset, enabled]);
-
-  const hasNextPage =
-    totalCount !== null && accumulatedSessions.length < totalCount;
-
-  const areAllSessionsLoaded =
-    totalCount !== null &&
-    accumulatedSessions.length >= totalCount &&
-    !isFetching &&
-    !isLoading;
-
-  useEffect(() => {
-    if (
-      hasNextPage &&
-      !isFetching &&
-      !isLoading &&
-      !isError &&
-      totalCount !== null
-    ) {
-      setOffset((prev) => prev + PAGE_SIZE);
-    }
-  }, [hasNextPage, isFetching, isLoading, isError, totalCount]);
-
-  const fetchNextPage = () => {
-    if (hasNextPage && !isFetching) {
-      setOffset((prev) => prev + PAGE_SIZE);
-    }
-  };
-
-  const reset = () => {
-    // Only reset the offset - keep existing sessions visible during refetch
-    // The effect will replace sessions when new data arrives at offset 0
-    setOffset(0);
-  };
-
-  return {
-    sessions: accumulatedSessions,
-    isLoading,
-    isFetching,
-    hasNextPage,
-    areAllSessionsLoaded,
-    totalCount,
-    fetchNextPage,
-    reset,
-  };
-}

autogpt_platform/frontend/src/app/(platform)/copilot/components/CopilotShell/helpers.ts

@@ -1,106 +0,0 @@
-import type { SessionDetailResponse } from "@/app/api/__generated__/models/sessionDetailResponse";
-import type { SessionSummaryResponse } from "@/app/api/__generated__/models/sessionSummaryResponse";
-import { format, formatDistanceToNow, isToday } from "date-fns";
-
-export function convertSessionDetailToSummary(session: SessionDetailResponse) {
-  return {
-    id: session.id,
-    created_at: session.created_at,
-    updated_at: session.updated_at,
-    title: undefined,
-  };
-}
-
-export function filterVisibleSessions(sessions: SessionSummaryResponse[]) {
-  const fiveMinutesAgo = Date.now() - 5 * 60 * 1000;
-  return sessions.filter((session) => {
-    const hasBeenUpdated = session.updated_at !== session.created_at;
-
-    if (hasBeenUpdated) return true;
-
-    const isRecentlyCreated =
-      new Date(session.created_at).getTime() > fiveMinutesAgo;
-
-    return isRecentlyCreated;
-  });
-}
-
-export function getSessionTitle(session: SessionSummaryResponse) {
-  if (session.title) return session.title;
-
-  const isNewSession = session.updated_at === session.created_at;
-
-  if (isNewSession) {
-    const createdDate = new Date(session.created_at);
-    if (isToday(createdDate)) {
-      return "Today";
-    }
-    return format(createdDate, "MMM d, yyyy");
-  }
-
-  return "Untitled Chat";
-}
-
-export function getSessionUpdatedLabel(session: SessionSummaryResponse) {
-  if (!session.updated_at) return "";
-  return formatDistanceToNow(new Date(session.updated_at), { addSuffix: true });
-}
-
-export function mergeCurrentSessionIntoList(
-  accumulatedSessions: SessionSummaryResponse[],
-  currentSessionId: string | null,
-  currentSessionData: SessionDetailResponse | null | undefined,
-  recentlyCreatedSessions?: Map<string, SessionSummaryResponse>,
-) {
-  const filteredSessions: SessionSummaryResponse[] = [];
-  const addedIds = new Set<string>();
-
-  if (accumulatedSessions.length > 0) {
-    const visibleSessions = filterVisibleSessions(accumulatedSessions);
-
-    if (currentSessionId) {
-      const currentInAll = accumulatedSessions.find(
-        (s) => s.id === currentSessionId,
-      );
-      if (currentInAll) {
-        const isInVisible = visibleSessions.some(
-          (s) => s.id === currentSessionId,
-        );
-        if (!isInVisible) {
-          filteredSessions.push(currentInAll);
-          addedIds.add(currentInAll.id);
-        }
-      }
-    }
-
-    for (const session of visibleSessions) {
-      if (!addedIds.has(session.id)) {
-        filteredSessions.push(session);
-        addedIds.add(session.id);
-      }
-    }
-  }
-
-  if (currentSessionId && currentSessionData) {
-    if (!addedIds.has(currentSessionId)) {
-      const summarySession = convertSessionDetailToSummary(currentSessionData);
-      filteredSessions.unshift(summarySession);
-      addedIds.add(currentSessionId);
-    }
-  }
-
-  if (recentlyCreatedSessions) {
-    for (const [sessionId, sessionData] of recentlyCreatedSessions) {
-      if (!addedIds.has(sessionId)) {
-        filteredSessions.unshift(sessionData);
-        addedIds.add(sessionId);
-      }
-    }
-  }
-
-  return filteredSessions;
-}
-
-export function getCurrentSessionId(searchParams: URLSearchParams) {
-  return searchParams.get("sessionId");
-}

autogpt_platform/frontend/src/app/(platform)/copilot/components/CopilotShell/useCopilotShell.ts

@@ -1,124 +0,0 @@
-"use client";
-
-import {
-  getGetV2GetSessionQueryKey,
-  getGetV2ListSessionsQueryKey,
-  useGetV2GetSession,
-} from "@/app/api/__generated__/endpoints/chat/chat";
-import { okData } from "@/app/api/helpers";
-import { useChatStore } from "@/components/contextual/Chat/chat-store";
-import { useBreakpoint } from "@/lib/hooks/useBreakpoint";
-import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
-import { useQueryClient } from "@tanstack/react-query";
-import { usePathname, useSearchParams } from "next/navigation";
-import { useCopilotStore } from "../../copilot-page-store";
-import { useCopilotSessionId } from "../../useCopilotSessionId";
-import { useMobileDrawer } from "./components/MobileDrawer/useMobileDrawer";
-import { getCurrentSessionId } from "./helpers";
-import { useShellSessionList } from "./useShellSessionList";
-
-export function useCopilotShell() {
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const queryClient = useQueryClient();
-  const breakpoint = useBreakpoint();
-  const { isLoggedIn } = useSupabase();
-  const isMobile =
-    breakpoint === "base" || breakpoint === "sm" || breakpoint === "md";
-
-  const { urlSessionId, setUrlSessionId } = useCopilotSessionId();
-
-  const isOnHomepage = pathname === "/copilot";
-  const paramSessionId = searchParams.get("sessionId");
-
-  const {
-    isDrawerOpen,
-    handleOpenDrawer,
-    handleCloseDrawer,
-    handleDrawerOpenChange,
-  } = useMobileDrawer();
-
-  const paginationEnabled = !isMobile || isDrawerOpen || !!paramSessionId;
-
-  const currentSessionId = getCurrentSessionId(searchParams);
-
-  const { data: currentSessionData } = useGetV2GetSession(
-    currentSessionId || "",
-    {
-      query: {
-        enabled: !!currentSessionId,
-        select: okData,
-      },
-    },
-  );
-
-  const {
-    sessions,
-    isLoading,
-    isSessionsFetching,
-    hasNextPage,
-    fetchNextPage,
-    resetPagination,
-    recentlyCreatedSessionsRef,
-  } = useShellSessionList({
-    paginationEnabled,
-    currentSessionId,
-    currentSessionData,
-    isOnHomepage,
-    paramSessionId,
-  });
-
-  const stopStream = useChatStore((s) => s.stopStream);
-  const isCreatingSession = useCopilotStore((s) => s.isCreatingSession);
-
-  function handleSessionClick(sessionId: string) {
-    if (sessionId === currentSessionId) return;
-
-    // Stop current stream - SSE reconnection allows resuming later
-    if (currentSessionId) {
-      stopStream(currentSessionId);
-    }
-
-    if (recentlyCreatedSessionsRef.current.has(sessionId)) {
-      queryClient.invalidateQueries({
-        queryKey: getGetV2GetSessionQueryKey(sessionId),
-      });
-    }
-    setUrlSessionId(sessionId, { shallow: false });
-    if (isMobile) handleCloseDrawer();
-  }
-
-  function handleNewChatClick() {
-    // Stop current stream - SSE reconnection allows resuming later
-    if (currentSessionId) {
-      stopStream(currentSessionId);
-    }
-
-    resetPagination();
-    queryClient.invalidateQueries({
-      queryKey: getGetV2ListSessionsQueryKey(),
-    });
-    setUrlSessionId(null, { shallow: false });
-    if (isMobile) handleCloseDrawer();
-  }
-
-  return {
-    isMobile,
-    isDrawerOpen,
-    isLoggedIn,
-    hasActiveSession:
-      Boolean(currentSessionId) && (!isOnHomepage || Boolean(paramSessionId)),
-    isLoading: isLoading || isCreatingSession,
-    isCreatingSession,
-    sessions,
-    currentSessionId: urlSessionId,
-    handleOpenDrawer,
-    handleCloseDrawer,
-    handleDrawerOpenChange,
-    handleNewChatClick,
-    handleSessionClick,
-    hasNextPage,
-    isFetchingNextPage: isSessionsFetching,
-    fetchNextPage,
-  };
-}

autogpt_platform/frontend/src/app/(platform)/copilot/components/CopilotShell/useShellSessionList.ts

@@ -1,113 +0,0 @@
-import { getGetV2ListSessionsQueryKey } from "@/app/api/__generated__/endpoints/chat/chat";
-import type { SessionDetailResponse } from "@/app/api/__generated__/models/sessionDetailResponse";
-import type { SessionSummaryResponse } from "@/app/api/__generated__/models/sessionSummaryResponse";
-import { useChatStore } from "@/components/contextual/Chat/chat-store";
-import { useQueryClient } from "@tanstack/react-query";
-import { useEffect, useMemo, useRef } from "react";
-import { useSessionsPagination } from "./components/SessionsList/useSessionsPagination";
-import {
-  convertSessionDetailToSummary,
-  filterVisibleSessions,
-  mergeCurrentSessionIntoList,
-} from "./helpers";
-
-interface UseShellSessionListArgs {
-  paginationEnabled: boolean;
-  currentSessionId: string | null;
-  currentSessionData: SessionDetailResponse | null | undefined;
-  isOnHomepage: boolean;
-  paramSessionId: string | null;
-}
-
-export function useShellSessionList({
-  paginationEnabled,
-  currentSessionId,
-  currentSessionData,
-  isOnHomepage,
-  paramSessionId,
-}: UseShellSessionListArgs) {
-  const queryClient = useQueryClient();
-  const onStreamComplete = useChatStore((s) => s.onStreamComplete);
-
-  const {
-    sessions: accumulatedSessions,
-    isLoading: isSessionsLoading,
-    isFetching: isSessionsFetching,
-    hasNextPage,
-    fetchNextPage,
-    reset: resetPagination,
-  } = useSessionsPagination({
-    enabled: paginationEnabled,
-  });
-
-  const recentlyCreatedSessionsRef = useRef<
-    Map<string, SessionSummaryResponse>
-  >(new Map());
-
-  useEffect(() => {
-    if (isOnHomepage && !paramSessionId) {
-      queryClient.invalidateQueries({
-        queryKey: getGetV2ListSessionsQueryKey(),
-      });
-    }
-  }, [isOnHomepage, paramSessionId, queryClient]);
-
-  useEffect(() => {
-    if (currentSessionId && currentSessionData) {
-      const isNewSession =
-        currentSessionData.updated_at === currentSessionData.created_at;
-      const isNotInAccumulated = !accumulatedSessions.some(
-        (s) => s.id === currentSessionId,
-      );
-      if (isNewSession || isNotInAccumulated) {
-        const summary = convertSessionDetailToSummary(currentSessionData);
-        recentlyCreatedSessionsRef.current.set(currentSessionId, summary);
-      }
-    }
-  }, [currentSessionId, currentSessionData, accumulatedSessions]);
-
-  useEffect(() => {
-    for (const sessionId of recentlyCreatedSessionsRef.current.keys()) {
-      if (accumulatedSessions.some((s) => s.id === sessionId)) {
-        recentlyCreatedSessionsRef.current.delete(sessionId);
-      }
-    }
-  }, [accumulatedSessions]);
-
-  useEffect(() => {
-    const unsubscribe = onStreamComplete(() => {
-      queryClient.invalidateQueries({
-        queryKey: getGetV2ListSessionsQueryKey(),
-      });
-    });
-    return unsubscribe;
-  }, [onStreamComplete, queryClient]);
-
-  const sessions = useMemo(
-    () =>
-      mergeCurrentSessionIntoList(
-        accumulatedSessions,
-        currentSessionId,
-        currentSessionData,
-        recentlyCreatedSessionsRef.current,
-      ),
-    [accumulatedSessions, currentSessionId, currentSessionData],
-  );
-
-  const visibleSessions = useMemo(
-    () => filterVisibleSessions(sessions),
-    [sessions],
-  );
-
-  const isLoading = isSessionsLoading && accumulatedSessions.length === 0;
-
-  return {
-    sessions: visibleSessions,
-    isLoading,
-    isSessionsFetching,
-    hasNextPage,
-    fetchNextPage,
-    resetPagination,
-    recentlyCreatedSessionsRef,
-  };
-}

autogpt_platform/frontend/src/app/(platform)/copilot/components/EmptySession/EmptySession.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { ChatInput } from "@/app/(platform)/copilot/components/ChatInput/ChatInput";
+import { Button } from "@/components/atoms/Button/Button";
+import { Text } from "@/components/atoms/Text/Text";
+import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
+import { SpinnerGapIcon } from "@phosphor-icons/react";
+import { motion } from "framer-motion";
+import { useEffect, useState } from "react";
+import {
+  getGreetingName,
+  getInputPlaceholder,
+  getQuickActions,
+} from "./helpers";
+
+interface Props {
+  inputLayoutId: string;
+  isCreatingSession: boolean;
+  onCreateSession: () => void | Promise<string>;
+  onSend: (message: string) => void | Promise<void>;
+}
+
+export function EmptySession({
+  inputLayoutId,
+  isCreatingSession,
+  onSend,
+}: Props) {
+  const { user } = useSupabase();
+  const greetingName = getGreetingName(user);
+  const quickActions = getQuickActions();
+  const [loadingAction, setLoadingAction] = useState<string | null>(null);
+  const [inputPlaceholder, setInputPlaceholder] = useState(
+    getInputPlaceholder(),
+  );
+
+  useEffect(() => {
+    setInputPlaceholder(getInputPlaceholder(window.innerWidth));
+  }, [window.innerWidth]);
+
+  async function handleQuickActionClick(action: string) {
+    if (isCreatingSession || loadingAction) return;
+
+    setLoadingAction(action);
+    try {
+      await onSend(action);
+    } finally {
+      setLoadingAction(null);
+    }
+  }
+
+  return (
+    <div className="flex h-full flex-1 items-center justify-center overflow-y-auto bg-[#f8f8f9] px-0 py-5 md:px-6 md:py-10">
+      <motion.div
+        className="w-full max-w-3xl text-center"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.3 }}
+      >
+        <div className="mx-auto max-w-3xl">
+          <Text variant="h3" className="mb-1 !text-[1.375rem] text-zinc-700">
+            Hey, <span className="text-violet-600">{greetingName}</span>
+          </Text>
+          <Text variant="h3" className="mb-8 !font-normal">
+            Tell me about your work — I&apos;ll find what to automate.
+          </Text>
+
+          <div className="mb-6">
+            <motion.div
+              layoutId={inputLayoutId}
+              transition={{ type: "spring", bounce: 0.2, duration: 0.65 }}
+              className="w-full px-2"
+            >
+              <ChatInput
+                inputId="chat-input-empty"
+                onSend={onSend}
+                disabled={isCreatingSession}
+                placeholder={inputPlaceholder}
+                className="w-full"
+              />
+            </motion.div>
+          </div>
+        </div>
+
+        <div className="flex flex-wrap items-center justify-center gap-3 overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+          {quickActions.map((action) => (
+            <Button
+              key={action}
+              type="button"
+              variant="outline"
+              size="small"
+              onClick={() => void handleQuickActionClick(action)}
+              disabled={isCreatingSession || loadingAction !== null}
+              aria-busy={loadingAction === action}
+              leftIcon={
+                loadingAction === action ? (
+                  <SpinnerGapIcon
+                    className="h-4 w-4 animate-spin"
+                    weight="bold"
+                  />
+                ) : null
+              }
+              className="h-auto shrink-0 border-zinc-300 px-3 py-2 text-[.9rem] text-zinc-600"
+            >
+              {action}
+            </Button>
+          ))}
+        </div>
+      </motion.div>
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot/components/EmptySession/helpers.ts

@@ -1,6 +1,26 @@
-import type { User } from "@supabase/supabase-js";
+import { User } from "@supabase/supabase-js";
 
-export function getGreetingName(user?: User | null): string {
+export function getInputPlaceholder(width?: number) {
+  if (!width) return "What's your role and what eats up most of your day?";
+
+  if (width < 500) {
+    return "I'm a chef and I hate...";
+  }
+  if (width <= 1080) {
+    return "What's your role and what eats up most of your day?";
+  }
+  return "What's your role and what eats up most of your day? e.g. 'I'm a recruiter and I hate...'";
+}
+
+export function getQuickActions() {
+  return [
+    "I don't know where to start, just ask me stuff",
+    "I do the same thing every week and it's killing me",
+    "Help me find where I'm wasting my time",
+  ];
+}
+
+export function getGreetingName(user?: User | null) {
   if (!user) return "there";
   const metadata = user.user_metadata as Record<string, unknown> | undefined;
   const fullName = metadata?.full_name;
@@ -16,30 +36,3 @@ export function getGreetingName(user?: User | null): string {
   }
   return "there";
 }
-
-export function buildCopilotChatUrl(prompt: string): string {
-  const trimmed = prompt.trim();
-  if (!trimmed) return "/copilot/chat";
-  const encoded = encodeURIComponent(trimmed);
-  return `/copilot/chat?prompt=${encoded}`;
-}
-
-export function getQuickActions(): string[] {
-  return [
-    "I don't know where to start, just ask me stuff",
-    "I do the same thing every week and it's killing me",
-    "Help me find where I'm wasting my time",
-  ];
-}
-
-export function getInputPlaceholder(width?: number) {
-  if (!width) return "What's your role and what eats up most of your day?";
-
-  if (width < 500) {
-    return "I'm a chef and I hate...";
-  }
-  if (width <= 1080) {
-    return "What's your role and what eats up most of your day?";
-  }
-  return "What's your role and what eats up most of your day? e.g. 'I'm a recruiter and I hate...'";
-}

autogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/MobileDrawer.tsx

@@ -0,0 +1,140 @@
+import type { SessionSummaryResponse } from "@/app/api/__generated__/models/sessionSummaryResponse";
+import { Button } from "@/components/atoms/Button/Button";
+import { Text } from "@/components/atoms/Text/Text";
+import { scrollbarStyles } from "@/components/styles/scrollbars";
+import { cn } from "@/lib/utils";
+import { PlusIcon, SpinnerGapIcon, X } from "@phosphor-icons/react";
+import { Drawer } from "vaul";
+
+interface Props {
+  isOpen: boolean;
+  sessions: SessionSummaryResponse[];
+  currentSessionId: string | null;
+  isLoading: boolean;
+  onSelectSession: (sessionId: string) => void;
+  onNewChat: () => void;
+  onClose: () => void;
+  onOpenChange: (open: boolean) => void;
+}
+
+function formatDate(dateString: string) {
+  const date = new Date(dateString);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+
+  if (diffDays === 0) return "Today";
+  if (diffDays === 1) return "Yesterday";
+  if (diffDays < 7) return `${diffDays} days ago`;
+
+  const day = date.getDate();
+  const ordinal =
+    day % 10 === 1 && day !== 11
+      ? "st"
+      : day % 10 === 2 && day !== 12
+        ? "nd"
+        : day % 10 === 3 && day !== 13
+          ? "rd"
+          : "th";
+  const month = date.toLocaleDateString("en-US", { month: "short" });
+  const year = date.getFullYear();
+
+  return `${day}${ordinal} ${month} ${year}`;
+}
+
+export function MobileDrawer({
+  isOpen,
+  sessions,
+  currentSessionId,
+  isLoading,
+  onSelectSession,
+  onNewChat,
+  onClose,
+  onOpenChange,
+}: Props) {
+  return (
+    <Drawer.Root open={isOpen} onOpenChange={onOpenChange} direction="left">
+      <Drawer.Portal>
+        <Drawer.Overlay className="fixed inset-0 z-[60] bg-black/10 backdrop-blur-sm" />
+        <Drawer.Content className="fixed left-0 top-0 z-[70] flex h-full w-80 flex-col border-r border-zinc-200 bg-zinc-50">
+          <div className="shrink-0 border-b border-zinc-200 px-4 py-2">
+            <div className="flex items-center justify-between">
+              <Drawer.Title className="text-lg font-semibold text-zinc-800">
+                Your chats
+              </Drawer.Title>
+              <Button
+                variant="icon"
+                size="icon"
+                aria-label="Close sessions"
+                onClick={onClose}
+              >
+                <X width="1rem" height="1rem" />
+              </Button>
+            </div>
+          </div>
+          <div
+            className={cn(
+              "flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto px-3 py-3",
+              scrollbarStyles,
+            )}
+          >
+            {isLoading ? (
+              <div className="flex items-center justify-center py-4">
+                <SpinnerGapIcon className="h-5 w-5 animate-spin text-neutral-400" />
+              </div>
+            ) : sessions.length === 0 ? (
+              <p className="py-4 text-center text-sm text-neutral-500">
+                No conversations yet
+              </p>
+            ) : (
+              sessions.map((session) => (
+                <button
+                  key={session.id}
+                  onClick={() => onSelectSession(session.id)}
+                  className={cn(
+                    "w-full rounded-lg px-3 py-2.5 text-left transition-colors",
+                    session.id === currentSessionId
+                      ? "bg-zinc-100"
+                      : "hover:bg-zinc-50",
+                  )}
+                >
+                  <div className="flex min-w-0 max-w-full flex-col overflow-hidden">
+                    <div className="min-w-0 max-w-full">
+                      <Text
+                        variant="body"
+                        className={cn(
+                          "truncate font-normal",
+                          session.id === currentSessionId
+                            ? "text-zinc-600"
+                            : "text-zinc-800",
+                        )}
+                      >
+                        {session.title || "Untitled chat"}
+                      </Text>
+                    </div>
+                    <Text variant="small" className="text-neutral-400">
+                      {formatDate(session.updated_at)}
+                    </Text>
+                  </div>
+                </button>
+              ))
+            )}
+          </div>
+          {currentSessionId && (
+            <div className="shrink-0 bg-white p-3 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
+              <Button
+                variant="primary"
+                size="small"
+                onClick={onNewChat}
+                className="w-full"
+                leftIcon={<PlusIcon width="1rem" height="1rem" />}
+              >
+                New Chat
+              </Button>
+            </div>
+          )}
+        </Drawer.Content>
+      </Drawer.Portal>
+    </Drawer.Root>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot/components/MorphingTextAnimation/MorphingTextAnimation.tsx

@@ -0,0 +1,54 @@
+import { cn } from "@/lib/utils";
+import { AnimatePresence, motion } from "framer-motion";
+
+interface Props {
+  text: string;
+  className?: string;
+}
+
+export function MorphingTextAnimation({ text, className }: Props) {
+  const letters = text.split("");
+
+  return (
+    <div className={cn(className)}>
+      <AnimatePresence mode="popLayout" initial={false}>
+        <motion.div key={text} className="whitespace-nowrap">
+          <motion.span className="inline-flex overflow-hidden">
+            {letters.map((char, index) => (
+              <motion.span
+                key={`${text}-${index}`}
+                initial={{
+                  opacity: 0,
+                  y: 8,
+                  rotateX: "80deg",
+                  filter: "blur(6px)",
+                }}
+                animate={{
+                  opacity: 1,
+                  y: 0,
+                  rotateX: "0deg",
+                  filter: "blur(0px)",
+                }}
+                exit={{
+                  opacity: 0,
+                  y: -8,
+                  rotateX: "-80deg",
+                  filter: "blur(6px)",
+                }}
+                style={{ willChange: "transform" }}
+                transition={{
+                  delay: 0.015 * index,
+                  type: "spring",
+                  bounce: 0.5,
+                }}
+                className="inline-block"
+              >
+                {char === " " ? "\u00A0" : char}
+              </motion.span>
+            ))}
+          </motion.span>
+        </motion.div>
+      </AnimatePresence>
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot/components/OrbitLoader/OrbitLoader.module.css

@@ -0,0 +1,69 @@
+.loader {
+  position: relative;
+  animation: rotate 1s infinite;
+}
+
+.loader::before,
+.loader::after {
+  border-radius: 50%;
+  content: "";
+  display: block;
+  /* 40% of container size */
+  height: 40%;
+  width: 40%;
+}
+
+.loader::before {
+  animation: ball1 1s infinite;
+  background-color: #a1a1aa; /* zinc-400 */
+  box-shadow: calc(var(--spacing)) 0 0 #18181b; /* zinc-900 */
+  margin-bottom: calc(var(--gap));
+}
+
+.loader::after {
+  animation: ball2 1s infinite;
+  background-color: #18181b; /* zinc-900 */
+  box-shadow: calc(var(--spacing)) 0 0 #a1a1aa; /* zinc-400 */
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg) scale(0.8);
+  }
+  50% {
+    transform: rotate(360deg) scale(1.2);
+  }
+  100% {
+    transform: rotate(720deg) scale(0.8);
+  }
+}
+
+@keyframes ball1 {
+  0% {
+    box-shadow: calc(var(--spacing)) 0 0 #18181b;
+  }
+  50% {
+    box-shadow: 0 0 0 #18181b;
+    margin-bottom: 0;
+    transform: translate(calc(var(--spacing) / 2), calc(var(--spacing) / 2));
+  }
+  100% {
+    box-shadow: calc(var(--spacing)) 0 0 #18181b;
+    margin-bottom: calc(var(--gap));
+  }
+}
+
+@keyframes ball2 {
+  0% {
+    box-shadow: calc(var(--spacing)) 0 0 #a1a1aa;
+  }
+  50% {
+    box-shadow: 0 0 0 #a1a1aa;
+    margin-top: calc(var(--ball-size) * -1);
+    transform: translate(calc(var(--spacing) / 2), calc(var(--spacing) / 2));
+  }
+  100% {
+    box-shadow: calc(var(--spacing)) 0 0 #a1a1aa;
+    margin-top: 0;
+  }
+}

autogpt_platform/frontend/src/app/(platform)/copilot/components/OrbitLoader/OrbitLoader.tsx

@@ -0,0 +1,28 @@
+import { cn } from "@/lib/utils";
+import styles from "./OrbitLoader.module.css";
+
+interface Props {
+  size?: number;
+  className?: string;
+}
+
+export function OrbitLoader({ size = 24, className }: Props) {
+  const ballSize = Math.round(size * 0.4);
+  const spacing = Math.round(size * 0.6);
+  const gap = Math.round(size * 0.2);
+
+  return (
+    <div
+      className={cn(styles.loader, className)}
+      style={
+        {
+          width: size,
+          height: size,
+          "--ball-size": `${ballSize}px`,
+          "--spacing": `${spacing}px`,
+          "--gap": `${gap}px`,
+        } as React.CSSProperties
+      }
+    />
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot/components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,26 @@
+import { cn } from "@/lib/utils";
+
+interface Props {
+  value: number;
+  label?: string;
+  className?: string;
+}
+
+export function ProgressBar({ value, label, className }: Props) {
+  const clamped = Math.min(100, Math.max(0, value));
+
+  return (
+    <div className={cn("flex flex-col gap-1.5", className)}>
+      <div className="flex items-center justify-between text-xs text-neutral-500">
+        <span>{label ?? "Working on it..."}</span>
+        <span>{Math.round(clamped)}%</span>
+      </div>
+      <div className="h-2 w-full overflow-hidden rounded-full bg-neutral-200">
+        <div
+          className="h-full rounded-full bg-neutral-900 transition-[width] duration-300 ease-out"
+          style={{ width: `${clamped}%` }}
+        />
+      </div>
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot/components/PulseLoader/PulseLoader.module.css

@@ -0,0 +1,34 @@
+.loader {
+  position: relative;
+  display: inline-block;
+  flex-shrink: 0;
+}
+
+.loader::before,
+.loader::after {
+  content: "";
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: currentColor;
+  position: absolute;
+  left: 0;
+  top: 0;
+  animation: ripple 2s linear infinite;
+}
+
+.loader::after {
+  animation-delay: 1s;
+}
+
+@keyframes ripple {
+  0% {
+    transform: scale(0);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}

autogpt_platform/frontend/src/app/(platform)/copilot/components/PulseLoader/PulseLoader.tsx

@@ -0,0 +1,16 @@
+import { cn } from "@/lib/utils";
+import styles from "./PulseLoader.module.css";
+
+interface Props {
+  size?: number;
+  className?: string;
+}
+
+export function PulseLoader({ size = 24, className }: Props) {
+  return (
+    <div
+      className={cn(styles.loader, className)}
+      style={{ width: size, height: size }}
+    />
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot/components/ScaleLoader/ScaleLoader.module.css

@@ -0,0 +1,35 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  display: inline-block;
+  position: relative;
+}
+
+.loader::after,
+.loader::before {
+  content: "";
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: currentColor;
+  position: absolute;
+  left: 0;
+  top: 0;
+  animation: animloader 2s linear infinite;
+}
+
+.loader::after {
+  animation-delay: 1s;
+}
+
+@keyframes animloader {
+  0% {
+    transform: scale(0);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}

autogpt_platform/frontend/src/app/(platform)/copilot/components/ScaleLoader/ScaleLoader.tsx

@@ -0,0 +1,16 @@
+import { cn } from "@/lib/utils";
+import styles from "./ScaleLoader.module.css";
+
+interface Props {
+  size?: number;
+  className?: string;
+}
+
+export function ScaleLoader({ size = 48, className }: Props) {
+  return (
+    <div
+      className={cn(styles.loader, className)}
+      style={{ width: size, height: size }}
+    />
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot/components/SpinnerLoader/SpinnerLoader.module.css

@@ -0,0 +1,57 @@
+.loader {
+  position: relative;
+  display: inline-block;
+  flex-shrink: 0;
+  transform: rotateZ(45deg);
+  perspective: 1000px;
+  border-radius: 50%;
+  color: currentColor;
+}
+
+.loader::before,
+.loader::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: inherit;
+  height: inherit;
+  border-radius: 50%;
+  transform: rotateX(70deg);
+  animation: spin 1s linear infinite;
+}
+
+.loader::after {
+  color: var(--spinner-accent, #a855f7);
+  transform: rotateY(70deg);
+  animation-delay: 0.4s;
+}
+
+@keyframes spin {
+  0%,
+  100% {
+    box-shadow: 0.2em 0 0 0 currentColor;
+  }
+  12% {
+    box-shadow: 0.2em 0.2em 0 0 currentColor;
+  }
+  25% {
+    box-shadow: 0 0.2em 0 0 currentColor;
+  }
+  37% {
+    box-shadow: -0.2em 0.2em 0 0 currentColor;
+  }
+  50% {
+    box-shadow: -0.2em 0 0 0 currentColor;
+  }
+  62% {
+    box-shadow: -0.2em -0.2em 0 0 currentColor;
+  }
+  75% {
+    box-shadow: 0 -0.2em 0 0 currentColor;
+  }
+  87% {
+    box-shadow: 0.2em -0.2em 0 0 currentColor;
+  }
+}

autogpt_platform/frontend/src/app/(platform)/copilot/components/SpinnerLoader/SpinnerLoader.tsx

@@ -0,0 +1,16 @@
+import { cn } from "@/lib/utils";
+import styles from "./SpinnerLoader.module.css";
+
+interface Props {
+  size?: number;
+  className?: string;
+}
+
+export function SpinnerLoader({ size = 24, className }: Props) {
+  return (
+    <div
+      className={cn(styles.loader, className)}
+      style={{ width: size, height: size }}
+    />
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot/components/ToolAccordion/AccordionContent.tsx

@@ -0,0 +1,235 @@
+import { Link } from "@/components/atoms/Link/Link";
+import { Text } from "@/components/atoms/Text/Text";
+import { cn } from "@/lib/utils";
+
+/* ------------------------------------------------------------------ */
+/*  Layout                                                            */
+/* ------------------------------------------------------------------ */
+
+export function ContentGrid({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return <div className={cn("grid gap-2", className)}>{children}</div>;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Card                                                              */
+/* ------------------------------------------------------------------ */
+
+export function ContentCard({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "rounded-lg bg-gradient-to-r from-purple-500/30 to-blue-500/30 p-[1px]",
+        className,
+      )}
+    >
+      <div className="rounded-lg bg-neutral-100 p-3">{children}</div>
+    </div>
+  );
+}
+
+/** Flex row with a left content area (`children`) and an optional right‑side `action`. */
+export function ContentCardHeader({
+  children,
+  action,
+  className,
+}: {
+  children: React.ReactNode;
+  action?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("flex items-start justify-between gap-2", className)}>
+      <div className="min-w-0">{children}</div>
+      {action}
+    </div>
+  );
+}
+
+export function ContentCardTitle({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <Text
+      variant="body-medium"
+      className={cn("truncate text-zinc-800", className)}
+    >
+      {children}
+    </Text>
+  );
+}
+
+export function ContentCardSubtitle({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <Text
+      variant="small"
+      className={cn("mt-0.5 truncate font-mono text-zinc-800", className)}
+    >
+      {children}
+    </Text>
+  );
+}
+
+export function ContentCardDescription({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <Text variant="body" className={cn("mt-2 text-zinc-800", className)}>
+      {children}
+    </Text>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Text                                                              */
+/* ------------------------------------------------------------------ */
+
+export function ContentMessage({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <Text variant="body" className={cn("text-zinc-800", className)}>
+      {children}
+    </Text>
+  );
+}
+
+export function ContentHint({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <Text variant="small" className={cn("text-neutral-500", className)}>
+      {children}
+    </Text>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Code / data                                                       */
+/* ------------------------------------------------------------------ */
+
+export function ContentCodeBlock({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <pre
+      className={cn(
+        "whitespace-pre-wrap rounded-lg border bg-black p-3 text-xs text-neutral-200",
+        className,
+      )}
+    >
+      {children}
+    </pre>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Inline elements                                                   */
+/* ------------------------------------------------------------------ */
+
+export function ContentBadge({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <Text
+      variant="small"
+      as="span"
+      className={cn(
+        "shrink-0 rounded-full border bg-muted px-2 py-0.5 text-[11px] text-zinc-800",
+        className,
+      )}
+    >
+      {children}
+    </Text>
+  );
+}
+
+export function ContentLink({
+  href,
+  children,
+  className,
+  ...rest
+}: Omit<React.ComponentProps<typeof Link>, "className"> & {
+  className?: string;
+}) {
+  return (
+    <Link
+      variant="primary"
+      isExternal
+      href={href}
+      className={cn("shrink-0 text-xs text-purple-500", className)}
+      {...rest}
+    >
+      {children}
+    </Link>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Lists                                                             */
+/* ------------------------------------------------------------------ */
+
+export function ContentSuggestionsList({
+  items,
+  max = 5,
+  className,
+}: {
+  items: string[];
+  max?: number;
+  className?: string;
+}) {
+  if (items.length === 0) return null;
+  return (
+    <ul
+      className={cn(
+        "mt-2 list-disc space-y-1 pl-5 font-sans text-[0.75rem] leading-[1.125rem] text-zinc-800",
+        className,
+      )}
+    >
+      {items.slice(0, max).map((s) => (
+        <li key={s}>{s}</li>
+      ))}
+    </ul>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot/components/ToolAccordion/ToolAccordion.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { CaretDownIcon } from "@phosphor-icons/react";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import { useId } from "react";
+import { useToolAccordion } from "./useToolAccordion";
+
+interface Props {
+  icon: React.ReactNode;
+  title: React.ReactNode;
+  titleClassName?: string;
+  description?: React.ReactNode;
+  children: React.ReactNode;
+  className?: string;
+  defaultExpanded?: boolean;
+  expanded?: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
+}
+
+export function ToolAccordion({
+  icon,
+  title,
+  titleClassName,
+  description,
+  children,
+  className,
+  defaultExpanded,
+  expanded,
+  onExpandedChange,
+}: Props) {
+  const shouldReduceMotion = useReducedMotion();
+  const contentId = useId();
+  const { isExpanded, toggle } = useToolAccordion({
+    expanded,
+    defaultExpanded,
+    onExpandedChange,
+  });
+
+  return (
+    <div
+      className={cn(
+        "mt-2 w-full rounded-lg border border-slate-200 bg-slate-100 px-3 py-2",
+        className,
+      )}
+    >
+      <button
+        type="button"
+        aria-expanded={isExpanded}
+        aria-controls={contentId}
+        onClick={toggle}
+        className="flex w-full items-center justify-between gap-3 py-1 text-left"
+      >
+        <div className="flex min-w-0 items-center gap-3">
+          <span className="flex shrink-0 items-center text-gray-800">
+            {icon}
+          </span>
+          <div className="min-w-0">
+            <p
+              className={cn(
+                "truncate text-sm font-medium text-gray-800",
+                titleClassName,
+              )}
+            >
+              {title}
+            </p>
+            {description && (
+              <p className="truncate text-xs text-slate-800">{description}</p>
+            )}
+          </div>
+        </div>
+        <CaretDownIcon
+          className={cn(
+            "h-4 w-4 shrink-0 text-slate-500 transition-transform",
+            isExpanded && "rotate-180",
+          )}
+          weight="bold"
+        />
+      </button>
+
+      <AnimatePresence initial={false}>
+        {isExpanded && (
+          <motion.div
+            id={contentId}
+            initial={{ height: 0, opacity: 0, filter: "blur(10px)" }}
+            animate={{ height: "auto", opacity: 1, filter: "blur(0px)" }}
+            exit={{ height: 0, opacity: 0, filter: "blur(10px)" }}
+            transition={
+              shouldReduceMotion
+                ? { duration: 0 }
+                : { type: "spring", bounce: 0.35, duration: 0.55 }
+            }
+            className="overflow-hidden"
+            style={{ willChange: "height, opacity, filter" }}
+          >
+            <div className="pb-2 pt-3">{children}</div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot/components/ToolAccordion/useToolAccordion.ts

@@ -0,0 +1,32 @@
+import { useState } from "react";
+
+interface UseToolAccordionOptions {
+  expanded?: boolean;
+  defaultExpanded?: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
+}
+
+interface UseToolAccordionResult {
+  isExpanded: boolean;
+  toggle: () => void;
+}
+
+export function useToolAccordion({
+  expanded,
+  defaultExpanded = false,
+  onExpandedChange,
+}: UseToolAccordionOptions): UseToolAccordionResult {
+  const [uncontrolledExpanded, setUncontrolledExpanded] =
+    useState(defaultExpanded);
+
+  const isControlled = typeof expanded === "boolean";
+  const isExpanded = isControlled ? expanded : uncontrolledExpanded;
+
+  function toggle() {
+    const next = !isExpanded;
+    if (!isControlled) setUncontrolledExpanded(next);
+    onExpandedChange?.(next);
+  }
+
+  return { isExpanded, toggle };
+}

autogpt_platform/frontend/src/app/(platform)/copilot/copilot-page-store.ts

@@ -1,56 +0,0 @@
-"use client";
-
-import { create } from "zustand";
-
-interface CopilotStoreState {
-  isStreaming: boolean;
-  isSwitchingSession: boolean;
-  isCreatingSession: boolean;
-  isInterruptModalOpen: boolean;
-  pendingAction: (() => void) | null;
-}
-
-interface CopilotStoreActions {
-  setIsStreaming: (isStreaming: boolean) => void;
-  setIsSwitchingSession: (isSwitchingSession: boolean) => void;
-  setIsCreatingSession: (isCreating: boolean) => void;
-  openInterruptModal: (onConfirm: () => void) => void;
-  confirmInterrupt: () => void;
-  cancelInterrupt: () => void;
-}
-
-type CopilotStore = CopilotStoreState & CopilotStoreActions;
-
-export const useCopilotStore = create<CopilotStore>((set, get) => ({
-  isStreaming: false,
-  isSwitchingSession: false,
-  isCreatingSession: false,
-  isInterruptModalOpen: false,
-  pendingAction: null,
-
-  setIsStreaming(isStreaming) {
-    set({ isStreaming });
-  },
-
-  setIsSwitchingSession(isSwitchingSession) {
-    set({ isSwitchingSession });
-  },
-
-  setIsCreatingSession(isCreatingSession) {
-    set({ isCreatingSession });
-  },
-
-  openInterruptModal(onConfirm) {
-    set({ isInterruptModalOpen: true, pendingAction: onConfirm });
-  },
-
-  confirmInterrupt() {
-    const { pendingAction } = get();
-    set({ isInterruptModalOpen: false, pendingAction: null });
-    if (pendingAction) pendingAction();
-  },
-
-  cancelInterrupt() {
-    set({ isInterruptModalOpen: false, pendingAction: null });
-  },
-}));

autogpt_platform/frontend/src/app/(platform)/copilot/helpers/convertChatSessionToUiMessages.ts

@@ -0,0 +1,128 @@
+import type { UIMessage, UIDataTypes, UITools } from "ai";
+
+interface SessionChatMessage {
+  role: string;
+  content: string | null;
+  tool_call_id: string | null;
+  tool_calls: unknown[] | null;
+}
+
+function coerceSessionChatMessages(
+  rawMessages: unknown[],
+): SessionChatMessage[] {
+  return rawMessages
+    .map((m) => {
+      if (!m || typeof m !== "object") return null;
+      const msg = m as Record<string, unknown>;
+
+      const role = typeof msg.role === "string" ? msg.role : null;
+      if (!role) return null;
+
+      return {
+        role,
+        content:
+          typeof msg.content === "string"
+            ? msg.content
+            : msg.content == null
+              ? null
+              : String(msg.content),
+        tool_call_id:
+          typeof msg.tool_call_id === "string"
+            ? msg.tool_call_id
+            : msg.tool_call_id == null
+              ? null
+              : String(msg.tool_call_id),
+        tool_calls: Array.isArray(msg.tool_calls) ? msg.tool_calls : null,
+      };
+    })
+    .filter((m): m is SessionChatMessage => m !== null);
+}
+
+function safeJsonParse(value: string): unknown {
+  try {
+    return JSON.parse(value) as unknown;
+  } catch {
+    return value;
+  }
+}
+
+function toToolInput(rawArguments: unknown): unknown {
+  if (typeof rawArguments === "string") {
+    const trimmed = rawArguments.trim();
+    return trimmed ? safeJsonParse(trimmed) : {};
+  }
+  if (rawArguments && typeof rawArguments === "object") return rawArguments;
+  return {};
+}
+
+export function convertChatSessionMessagesToUiMessages(
+  sessionId: string,
+  rawMessages: unknown[],
+): UIMessage<unknown, UIDataTypes, UITools>[] {
+  const messages = coerceSessionChatMessages(rawMessages);
+  const toolOutputsByCallId = new Map<string, unknown>();
+
+  for (const msg of messages) {
+    if (msg.role !== "tool") continue;
+    if (!msg.tool_call_id) continue;
+    if (msg.content == null) continue;
+    toolOutputsByCallId.set(msg.tool_call_id, msg.content);
+  }
+
+  const uiMessages: UIMessage<unknown, UIDataTypes, UITools>[] = [];
+
+  messages.forEach((msg, index) => {
+    if (msg.role === "tool") return;
+    if (msg.role !== "user" && msg.role !== "assistant") return;
+
+    const parts: UIMessage<unknown, UIDataTypes, UITools>["parts"] = [];
+
+    if (typeof msg.content === "string" && msg.content.trim()) {
+      parts.push({ type: "text", text: msg.content, state: "done" });
+    }
+
+    if (msg.role === "assistant" && Array.isArray(msg.tool_calls)) {
+      for (const rawToolCall of msg.tool_calls) {
+        if (!rawToolCall || typeof rawToolCall !== "object") continue;
+        const toolCall = rawToolCall as {
+          id?: unknown;
+          function?: { name?: unknown; arguments?: unknown };
+        };
+
+        const toolCallId = String(toolCall.id ?? "").trim();
+        const toolName = String(toolCall.function?.name ?? "").trim();
+        if (!toolCallId || !toolName) continue;
+
+        const input = toToolInput(toolCall.function?.arguments);
+        const output = toolOutputsByCallId.get(toolCallId);
+
+        if (output !== undefined) {
+          parts.push({
+            type: `tool-${toolName}`,
+            toolCallId,
+            state: "output-available",
+            input,
+            output: typeof output === "string" ? safeJsonParse(output) : output,
+          });
+        } else {
+          parts.push({
+            type: `tool-${toolName}`,
+            toolCallId,
+            state: "input-available",
+            input,
+          });
+        }
+      }
+    }
+
+    if (parts.length === 0) return;
+
+    uiMessages.push({
+      id: `${sessionId}-${index}`,
+      role: msg.role,
+      parts,
+    });
+  });
+
+  return uiMessages;
+}

autogpt_platform/frontend/src/app/(platform)/copilot/hooks/Untitled

@@ -7,4 +7,4 @@ export function useCopilotSessionId() {
   );
 
   return { urlSessionId, setUrlSessionId };
-}
+}

autogpt_platform/frontend/src/app/(platform)/copilot/hooks/useAsymptoticProgress.ts

@@ -5,17 +5,16 @@ import { useEffect, useRef, useState } from "react";
  * asymptotically approaching but never reaching the max value.
  *
  * Uses a half-life formula: progress = max * (1 - 0.5^(time/halfLife))
- * This creates the "game loading bar" effect where:
+ * This creates a "loading bar" effect where:
  * - 50% is reached at halfLifeSeconds
  * - 75% is reached at 2 * halfLifeSeconds
  * - 87.5% is reached at 3 * halfLifeSeconds
- * - and so on...
  *
  * @param isActive - Whether the progress should be animating
  * @param halfLifeSeconds - Time in seconds to reach 50% progress (default: 30)
  * @param maxProgress - Maximum progress value to approach (default: 100)
  * @param intervalMs - Update interval in milliseconds (default: 100)
- * @returns Current progress value (0-maxProgress)
+ * @returns Current progress value (0–maxProgress)
  */
 export function useAsymptoticProgress(
   isActive: boolean,
@@ -35,8 +34,6 @@ export function useAsymptoticProgress(
 
     const interval = setInterval(() => {
       elapsedTimeRef.current += intervalMs / 1000;
-      // Half-life approach: progress = max * (1 - 0.5^(time/halfLife))
-      // At t=halfLife: 50%, at t=2*halfLife: 75%, at t=3*halfLife: 87.5%, etc.
       const newProgress =
         maxProgress *
         (1 - Math.pow(0.5, elapsedTimeRef.current / halfLifeSeconds));

autogpt_platform/frontend/src/app/(platform)/copilot/layout.tsx

@@ -1,13 +0,0 @@
-"use client";
-import { FeatureFlagPage } from "@/services/feature-flags/FeatureFlagPage";
-import { Flag } from "@/services/feature-flags/use-get-flag";
-import { type ReactNode } from "react";
-import { CopilotShell } from "./components/CopilotShell/CopilotShell";
-
-export default function CopilotLayout({ children }: { children: ReactNode }) {
-  return (
-    <FeatureFlagPage flag={Flag.CHAT} whenDisabled="/library">
-      <CopilotShell>{children}</CopilotShell>
-    </FeatureFlagPage>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/copilot/page.tsx

@@ -1,149 +1,13 @@
 "use client";
 
-import { Button } from "@/components/atoms/Button/Button";
-import { Skeleton } from "@/components/atoms/Skeleton/Skeleton";
-import { Text } from "@/components/atoms/Text/Text";
-import { Chat } from "@/components/contextual/Chat/Chat";
-import { ChatInput } from "@/components/contextual/Chat/components/ChatInput/ChatInput";
-import { Dialog } from "@/components/molecules/Dialog/Dialog";
-import { useEffect, useState } from "react";
-import { useCopilotStore } from "./copilot-page-store";
-import { getInputPlaceholder } from "./helpers";
-import { useCopilotPage } from "./useCopilotPage";
-
-export default function CopilotPage() {
-  const { state, handlers } = useCopilotPage();
-  const isInterruptModalOpen = useCopilotStore((s) => s.isInterruptModalOpen);
-  const confirmInterrupt = useCopilotStore((s) => s.confirmInterrupt);
-  const cancelInterrupt = useCopilotStore((s) => s.cancelInterrupt);
-
-  const [inputPlaceholder, setInputPlaceholder] = useState(
-    getInputPlaceholder(),
-  );
-
-  useEffect(() => {
-    const handleResize = () => {
-      setInputPlaceholder(getInputPlaceholder(window.innerWidth));
-    };
-
-    handleResize();
-
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
-
-  const { greetingName, quickActions, isLoading, hasSession, initialPrompt } =
-    state;
-
-  const {
-    handleQuickAction,
-    startChatWithPrompt,
-    handleSessionNotFound,
-    handleStreamingChange,
-  } = handlers;
-
-  if (hasSession) {
-    return (
-      <div className="flex h-full flex-col">
-        <Chat
-          className="flex-1"
-          initialPrompt={initialPrompt}
-          onSessionNotFound={handleSessionNotFound}
-          onStreamingChange={handleStreamingChange}
-        />
-        <Dialog
-          title="Interrupt current chat?"
-          styling={{ maxWidth: 300, width: "100%" }}
-          controlled={{
-            isOpen: isInterruptModalOpen,
-            set: (open) => {
-              if (!open) cancelInterrupt();
-            },
-          }}
-          onClose={cancelInterrupt}
-        >
-          <Dialog.Content>
-            <div className="flex flex-col gap-4">
-              <Text variant="body">
-                The current chat response will be interrupted. Are you sure you
-                want to continue?
-              </Text>
-              <Dialog.Footer>
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={cancelInterrupt}
-                >
-                  Cancel
-                </Button>
-                <Button
-                  type="button"
-                  variant="primary"
-                  onClick={confirmInterrupt}
-                >
-                  Continue
-                </Button>
-              </Dialog.Footer>
-            </div>
-          </Dialog.Content>
-        </Dialog>
-      </div>
-    );
-  }
+import { FeatureFlagPage } from "@/services/feature-flags/FeatureFlagPage";
+import { Flag } from "@/services/feature-flags/use-get-flag";
+import { CopilotPage } from "./CopilotPage";
 
+export default function Page() {
   return (
-    <div className="flex h-full flex-1 items-center justify-center overflow-y-auto bg-[#f8f8f9] px-3 py-5 md:px-6 md:py-10">
-      <div className="w-full text-center">
-        {isLoading ? (
-          <div className="mx-auto max-w-2xl">
-            <Skeleton className="mx-auto mb-3 h-8 w-64" />
-            <Skeleton className="mx-auto mb-8 h-6 w-80" />
-            <div className="mb-8">
-              <Skeleton className="mx-auto h-14 w-full rounded-lg" />
-            </div>
-            <div className="flex flex-wrap items-center justify-center gap-3">
-              {Array.from({ length: 4 }).map((_, i) => (
-                <Skeleton key={i} className="h-9 w-48 rounded-md" />
-              ))}
-            </div>
-          </div>
-        ) : (
-          <>
-            <div className="mx-auto max-w-3xl">
-              <Text
-                variant="h3"
-                className="mb-1 !text-[1.375rem] text-zinc-700"
-              >
-                Hey, <span className="text-violet-600">{greetingName}</span>
-              </Text>
-              <Text variant="h3" className="mb-8 !font-normal">
-                Tell me about your work — I&apos;ll find what to automate.
-              </Text>
-
-              <div className="mb-6">
-                <ChatInput
-                  onSend={startChatWithPrompt}
-                  placeholder={inputPlaceholder}
-                />
-              </div>
-            </div>
-            <div className="flex flex-wrap items-center justify-center gap-3 overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-              {quickActions.map((action) => (
-                <Button
-                  key={action}
-                  type="button"
-                  variant="outline"
-                  size="small"
-                  onClick={() => handleQuickAction(action)}
-                  className="h-auto shrink-0 border-zinc-300 px-3 py-2 text-[.9rem] text-zinc-600"
-                >
-                  {action}
-                </Button>
-              ))}
-            </div>
-          </>
-        )}
-      </div>
-    </div>
+    <FeatureFlagPage flag={Flag.CHAT} whenDisabled="/library">
+      <CopilotPage />
+    </FeatureFlagPage>
   );
 }

autogpt_platform/frontend/src/app/(platform)/copilot/tools/CreateAgent/CreateAgent.tsx

@@ -0,0 +1,237 @@
+"use client";
+
+import { WarningDiamondIcon } from "@phosphor-icons/react";
+import type { ToolUIPart } from "ai";
+import { useCopilotChatActions } from "../../components/CopilotChatActionsProvider/useCopilotChatActions";
+import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
+import { OrbitLoader } from "../../components/OrbitLoader/OrbitLoader";
+import { ProgressBar } from "../../components/ProgressBar/ProgressBar";
+import {
+  ContentCardDescription,
+  ContentCodeBlock,
+  ContentGrid,
+  ContentHint,
+  ContentLink,
+  ContentMessage,
+} from "../../components/ToolAccordion/AccordionContent";
+import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
+import { useAsymptoticProgress } from "../../hooks/useAsymptoticProgress";
+import {
+  ClarificationQuestionsCard,
+  ClarifyingQuestion,
+} from "./components/ClarificationQuestionsCard";
+import {
+  AccordionIcon,
+  formatMaybeJson,
+  getAnimationText,
+  getCreateAgentToolOutput,
+  isAgentPreviewOutput,
+  isAgentSavedOutput,
+  isClarificationNeededOutput,
+  isErrorOutput,
+  isOperationInProgressOutput,
+  isOperationPendingOutput,
+  isOperationStartedOutput,
+  ToolIcon,
+  truncateText,
+  type CreateAgentToolOutput,
+} from "./helpers";
+
+export interface CreateAgentToolPart {
+  type: string;
+  toolCallId: string;
+  state: ToolUIPart["state"];
+  input?: unknown;
+  output?: unknown;
+}
+
+interface Props {
+  part: CreateAgentToolPart;
+}
+
+function getAccordionMeta(output: CreateAgentToolOutput): {
+  icon: React.ReactNode;
+  title: React.ReactNode;
+  titleClassName?: string;
+  description?: string;
+} {
+  const icon = <AccordionIcon />;
+
+  if (isAgentSavedOutput(output)) {
+    return { icon, title: output.agent_name };
+  }
+  if (isAgentPreviewOutput(output)) {
+    return {
+      icon,
+      title: output.agent_name,
+      description: `${output.node_count} block${output.node_count === 1 ? "" : "s"}`,
+    };
+  }
+  if (isClarificationNeededOutput(output)) {
+    const questions = output.questions ?? [];
+    return {
+      icon,
+      title: "Needs clarification",
+      description: `${questions.length} question${questions.length === 1 ? "" : "s"}`,
+    };
+  }
+  if (
+    isOperationStartedOutput(output) ||
+    isOperationPendingOutput(output) ||
+    isOperationInProgressOutput(output)
+  ) {
+    return {
+      icon: <OrbitLoader size={32} />,
+      title: "Creating agent, this may take a few minutes. Sit back and relax.",
+    };
+  }
+  return {
+    icon: (
+      <WarningDiamondIcon size={32} weight="light" className="text-red-500" />
+    ),
+    title: "Error",
+    titleClassName: "text-red-500",
+  };
+}
+
+export function CreateAgentTool({ part }: Props) {
+  const text = getAnimationText(part);
+  const { onSend } = useCopilotChatActions();
+  const isStreaming =
+    part.state === "input-streaming" || part.state === "input-available";
+
+  const output = getCreateAgentToolOutput(part);
+  const isError =
+    part.state === "output-error" || (!!output && isErrorOutput(output));
+  const isOperating =
+    !!output &&
+    (isOperationStartedOutput(output) ||
+      isOperationPendingOutput(output) ||
+      isOperationInProgressOutput(output));
+  const progress = useAsymptoticProgress(isOperating);
+  const hasExpandableContent =
+    part.state === "output-available" &&
+    !!output &&
+    (isOperationStartedOutput(output) ||
+      isOperationPendingOutput(output) ||
+      isOperationInProgressOutput(output) ||
+      isAgentPreviewOutput(output) ||
+      isAgentSavedOutput(output) ||
+      isClarificationNeededOutput(output) ||
+      isErrorOutput(output));
+
+  function handleClarificationAnswers(answers: Record<string, string>) {
+    const questions =
+      output && isClarificationNeededOutput(output)
+        ? (output.questions ?? [])
+        : [];
+
+    const contextMessage = questions
+      .map((q) => {
+        const answer = answers[q.keyword] || "";
+        return `> ${q.question}\n\n${answer}`;
+      })
+      .join("\n\n");
+
+    onSend(
+      `**Here are my answers:**\n\n${contextMessage}\n\nPlease proceed with creating the agent.`,
+    );
+  }
+
+  return (
+    <div className="py-2">
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <ToolIcon isStreaming={isStreaming} isError={isError} />
+        <MorphingTextAnimation
+          text={text}
+          className={isError ? "text-red-500" : undefined}
+        />
+      </div>
+
+      {hasExpandableContent && output && (
+        <ToolAccordion
+          {...getAccordionMeta(output)}
+          defaultExpanded={isOperating || isClarificationNeededOutput(output)}
+        >
+          {isOperating && (
+            <ContentGrid>
+              <ProgressBar value={progress} />
+              <ContentHint>
+                This could take a few minutes, grab a coffee ☕
+              </ContentHint>
+            </ContentGrid>
+          )}
+
+          {isAgentSavedOutput(output) && (
+            <ContentGrid>
+              <ContentMessage>{output.message}</ContentMessage>
+              <div className="flex flex-wrap gap-2">
+                <ContentLink href={output.library_agent_link}>
+                  Open in library
+                </ContentLink>
+                <ContentLink href={output.agent_page_link}>
+                  Open in builder
+                </ContentLink>
+              </div>
+              <ContentCodeBlock>
+                {truncateText(
+                  formatMaybeJson({ agent_id: output.agent_id }),
+                  800,
+                )}
+              </ContentCodeBlock>
+            </ContentGrid>
+          )}
+
+          {isAgentPreviewOutput(output) && (
+            <ContentGrid>
+              <ContentMessage>{output.message}</ContentMessage>
+              {output.description?.trim() && (
+                <ContentCardDescription>
+                  {output.description}
+                </ContentCardDescription>
+              )}
+              <ContentCodeBlock>
+                {truncateText(formatMaybeJson(output.agent_json), 1600)}
+              </ContentCodeBlock>
+            </ContentGrid>
+          )}
+
+          {isClarificationNeededOutput(output) && (
+            <ClarificationQuestionsCard
+              questions={(output.questions ?? []).map((q) => {
+                const item: ClarifyingQuestion = {
+                  question: q.question,
+                  keyword: q.keyword,
+                };
+                const example =
+                  typeof q.example === "string" && q.example.trim()
+                    ? q.example.trim()
+                    : null;
+                if (example) item.example = example;
+                return item;
+              })}
+              message={output.message}
+              onSubmitAnswers={handleClarificationAnswers}
+            />
+          )}
+
+          {isErrorOutput(output) && (
+            <ContentGrid>
+              <ContentMessage>{output.message}</ContentMessage>
+              {output.error && (
+                <ContentCodeBlock>
+                  {formatMaybeJson(output.error)}
+                </ContentCodeBlock>
+              )}
+              {output.details && (
+                <ContentCodeBlock>
+                  {formatMaybeJson(output.details)}
+                </ContentCodeBlock>
+              )}
+            </ContentGrid>
+          )}
+        </ToolAccordion>
+      )}
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/CreateAgent/components/ClarificationQuestionsCard.tsx

@@ -6,7 +6,7 @@ import { Input } from "@/components/atoms/Input/Input";
 import { Text } from "@/components/atoms/Text/Text";
 import { cn } from "@/lib/utils";
 import { CheckCircleIcon, QuestionIcon } from "@phosphor-icons/react";
-import { useState, useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 
 export interface ClarifyingQuestion {
   question: string;
@@ -24,12 +24,7 @@ interface Props {
   className?: string;
 }
 
-function getStorageKey(sessionId?: string): string | null {
-  if (!sessionId) return null;
-  return `clarification_answers_${sessionId}`;
-}
-
-export function ClarificationQuestionsWidget({
+export function ClarificationQuestionsCard({
   questions,
   message,
   sessionId,
@@ -241,3 +236,8 @@ export function ClarificationQuestionsWidget({
     </div>
   );
 }
+
+function getStorageKey(sessionId?: string): string | null {
+  if (!sessionId) return null;
+  return `clarification_answers_${sessionId}`;
+}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/CreateAgent/helpers.tsx

@@ -0,0 +1,186 @@
+import type { AgentPreviewResponse } from "@/app/api/__generated__/models/agentPreviewResponse";
+import type { AgentSavedResponse } from "@/app/api/__generated__/models/agentSavedResponse";
+import type { ClarificationNeededResponse } from "@/app/api/__generated__/models/clarificationNeededResponse";
+import type { ErrorResponse } from "@/app/api/__generated__/models/errorResponse";
+import type { OperationInProgressResponse } from "@/app/api/__generated__/models/operationInProgressResponse";
+import type { OperationPendingResponse } from "@/app/api/__generated__/models/operationPendingResponse";
+import type { OperationStartedResponse } from "@/app/api/__generated__/models/operationStartedResponse";
+import { ResponseType } from "@/app/api/__generated__/models/responseType";
+import {
+  PlusCircleIcon,
+  PlusIcon,
+  WarningDiamondIcon,
+} from "@phosphor-icons/react";
+import type { ToolUIPart } from "ai";
+import { OrbitLoader } from "../../components/OrbitLoader/OrbitLoader";
+
+export type CreateAgentToolOutput =
+  | OperationStartedResponse
+  | OperationPendingResponse
+  | OperationInProgressResponse
+  | AgentPreviewResponse
+  | AgentSavedResponse
+  | ClarificationNeededResponse
+  | ErrorResponse;
+
+function parseOutput(output: unknown): CreateAgentToolOutput | null {
+  if (!output) return null;
+  if (typeof output === "string") {
+    const trimmed = output.trim();
+    if (!trimmed) return null;
+    try {
+      return parseOutput(JSON.parse(trimmed) as unknown);
+    } catch {
+      return null;
+    }
+  }
+  if (typeof output === "object") {
+    const type = (output as { type?: unknown }).type;
+    if (
+      type === ResponseType.operation_started ||
+      type === ResponseType.operation_pending ||
+      type === ResponseType.operation_in_progress ||
+      type === ResponseType.agent_preview ||
+      type === ResponseType.agent_saved ||
+      type === ResponseType.clarification_needed ||
+      type === ResponseType.error
+    ) {
+      return output as CreateAgentToolOutput;
+    }
+    if ("operation_id" in output && "tool_name" in output)
+      return output as OperationStartedResponse | OperationPendingResponse;
+    if ("tool_call_id" in output) return output as OperationInProgressResponse;
+    if ("agent_json" in output && "agent_name" in output)
+      return output as AgentPreviewResponse;
+    if ("agent_id" in output && "library_agent_id" in output)
+      return output as AgentSavedResponse;
+    if ("questions" in output) return output as ClarificationNeededResponse;
+    if ("error" in output || "details" in output)
+      return output as ErrorResponse;
+  }
+  return null;
+}
+
+export function getCreateAgentToolOutput(
+  part: unknown,
+): CreateAgentToolOutput | null {
+  if (!part || typeof part !== "object") return null;
+  return parseOutput((part as { output?: unknown }).output);
+}
+
+export function isOperationStartedOutput(
+  output: CreateAgentToolOutput,
+): output is OperationStartedResponse {
+  return (
+    output.type === ResponseType.operation_started ||
+    ("operation_id" in output && "tool_name" in output)
+  );
+}
+
+export function isOperationPendingOutput(
+  output: CreateAgentToolOutput,
+): output is OperationPendingResponse {
+  return output.type === ResponseType.operation_pending;
+}
+
+export function isOperationInProgressOutput(
+  output: CreateAgentToolOutput,
+): output is OperationInProgressResponse {
+  return (
+    output.type === ResponseType.operation_in_progress ||
+    "tool_call_id" in output
+  );
+}
+
+export function isAgentPreviewOutput(
+  output: CreateAgentToolOutput,
+): output is AgentPreviewResponse {
+  return output.type === ResponseType.agent_preview || "agent_json" in output;
+}
+
+export function isAgentSavedOutput(
+  output: CreateAgentToolOutput,
+): output is AgentSavedResponse {
+  return (
+    output.type === ResponseType.agent_saved || "agent_page_link" in output
+  );
+}
+
+export function isClarificationNeededOutput(
+  output: CreateAgentToolOutput,
+): output is ClarificationNeededResponse {
+  return (
+    output.type === ResponseType.clarification_needed || "questions" in output
+  );
+}
+
+export function isErrorOutput(
+  output: CreateAgentToolOutput,
+): output is ErrorResponse {
+  return output.type === ResponseType.error || "error" in output;
+}
+
+export function getAnimationText(part: {
+  state: ToolUIPart["state"];
+  input?: unknown;
+  output?: unknown;
+}): string {
+  switch (part.state) {
+    case "input-streaming":
+    case "input-available":
+      return "Creating a new agent";
+    case "output-available": {
+      const output = parseOutput(part.output);
+      if (!output) return "Creating a new agent";
+      if (isOperationStartedOutput(output)) return "Agent creation started";
+      if (isOperationPendingOutput(output)) return "Agent creation in progress";
+      if (isOperationInProgressOutput(output))
+        return "Agent creation already in progress";
+      if (isAgentSavedOutput(output)) return `Saved "${output.agent_name}"`;
+      if (isAgentPreviewOutput(output)) return `Preview "${output.agent_name}"`;
+      if (isClarificationNeededOutput(output)) return "Needs clarification";
+      return "Error creating agent";
+    }
+    case "output-error":
+      return "Error creating agent";
+    default:
+      return "Creating a new agent";
+  }
+}
+
+export function ToolIcon({
+  isStreaming,
+  isError,
+}: {
+  isStreaming?: boolean;
+  isError?: boolean;
+}) {
+  if (isError) {
+    return (
+      <WarningDiamondIcon size={14} weight="regular" className="text-red-500" />
+    );
+  }
+  if (isStreaming) {
+    return <OrbitLoader size={24} />;
+  }
+  return <PlusIcon size={14} weight="regular" className="text-neutral-400" />;
+}
+
+export function AccordionIcon() {
+  return <PlusCircleIcon size={32} weight="light" />;
+}
+
+export function formatMaybeJson(value: unknown): string {
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+
+export function truncateText(text: string, maxChars: number): string {
+  const trimmed = text.trim();
+  if (trimmed.length <= maxChars) return trimmed;
+  return `${trimmed.slice(0, maxChars).trimEnd()}…`;
+}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/EditAgent/EditAgent.tsx

@@ -0,0 +1,234 @@
+"use client";
+
+import { WarningDiamondIcon } from "@phosphor-icons/react";
+import type { ToolUIPart } from "ai";
+import { useCopilotChatActions } from "../../components/CopilotChatActionsProvider/useCopilotChatActions";
+import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
+import { OrbitLoader } from "../../components/OrbitLoader/OrbitLoader";
+import { ProgressBar } from "../../components/ProgressBar/ProgressBar";
+import {
+  ContentCardDescription,
+  ContentCodeBlock,
+  ContentGrid,
+  ContentHint,
+  ContentLink,
+  ContentMessage,
+} from "../../components/ToolAccordion/AccordionContent";
+import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
+import { useAsymptoticProgress } from "../../hooks/useAsymptoticProgress";
+import {
+  ClarificationQuestionsCard,
+  ClarifyingQuestion,
+} from "../CreateAgent/components/ClarificationQuestionsCard";
+import {
+  AccordionIcon,
+  formatMaybeJson,
+  getAnimationText,
+  getEditAgentToolOutput,
+  isAgentPreviewOutput,
+  isAgentSavedOutput,
+  isClarificationNeededOutput,
+  isErrorOutput,
+  isOperationInProgressOutput,
+  isOperationPendingOutput,
+  isOperationStartedOutput,
+  ToolIcon,
+  truncateText,
+  type EditAgentToolOutput,
+} from "./helpers";
+
+export interface EditAgentToolPart {
+  type: string;
+  toolCallId: string;
+  state: ToolUIPart["state"];
+  input?: unknown;
+  output?: unknown;
+}
+
+interface Props {
+  part: EditAgentToolPart;
+}
+
+function getAccordionMeta(output: EditAgentToolOutput): {
+  icon: React.ReactNode;
+  title: string;
+  titleClassName?: string;
+  description?: string;
+} {
+  const icon = <AccordionIcon />;
+
+  if (isAgentSavedOutput(output)) {
+    return { icon, title: output.agent_name };
+  }
+  if (isAgentPreviewOutput(output)) {
+    return {
+      icon,
+      title: output.agent_name,
+      description: `${output.node_count} block${output.node_count === 1 ? "" : "s"}`,
+    };
+  }
+  if (isClarificationNeededOutput(output)) {
+    const questions = output.questions ?? [];
+    return {
+      icon,
+      title: "Needs clarification",
+      description: `${questions.length} question${questions.length === 1 ? "" : "s"}`,
+    };
+  }
+  if (
+    isOperationStartedOutput(output) ||
+    isOperationPendingOutput(output) ||
+    isOperationInProgressOutput(output)
+  ) {
+    return { icon: <OrbitLoader size={32} />, title: "Editing agent" };
+  }
+  return {
+    icon: (
+      <WarningDiamondIcon size={32} weight="light" className="text-red-500" />
+    ),
+    title: "Error",
+    titleClassName: "text-red-500",
+  };
+}
+
+export function EditAgentTool({ part }: Props) {
+  const text = getAnimationText(part);
+  const { onSend } = useCopilotChatActions();
+  const isStreaming =
+    part.state === "input-streaming" || part.state === "input-available";
+
+  const output = getEditAgentToolOutput(part);
+  const isError =
+    part.state === "output-error" || (!!output && isErrorOutput(output));
+  const isOperating =
+    !!output &&
+    (isOperationStartedOutput(output) ||
+      isOperationPendingOutput(output) ||
+      isOperationInProgressOutput(output));
+  const progress = useAsymptoticProgress(isOperating);
+  const hasExpandableContent =
+    part.state === "output-available" &&
+    !!output &&
+    (isOperationStartedOutput(output) ||
+      isOperationPendingOutput(output) ||
+      isOperationInProgressOutput(output) ||
+      isAgentPreviewOutput(output) ||
+      isAgentSavedOutput(output) ||
+      isClarificationNeededOutput(output) ||
+      isErrorOutput(output));
+
+  function handleClarificationAnswers(answers: Record<string, string>) {
+    const questions =
+      output && isClarificationNeededOutput(output)
+        ? (output.questions ?? [])
+        : [];
+
+    const contextMessage = questions
+      .map((q) => {
+        const answer = answers[q.keyword] || "";
+        return `> ${q.question}\n\n${answer}`;
+      })
+      .join("\n\n");
+
+    onSend(
+      `**Here are my answers:**\n\n${contextMessage}\n\nPlease proceed with editing the agent.`,
+    );
+  }
+
+  return (
+    <div className="py-2">
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <ToolIcon isStreaming={isStreaming} isError={isError} />
+        <MorphingTextAnimation
+          text={text}
+          className={isError ? "text-red-500" : undefined}
+        />
+      </div>
+
+      {hasExpandableContent && output && (
+        <ToolAccordion
+          {...getAccordionMeta(output)}
+          defaultExpanded={isOperating || isClarificationNeededOutput(output)}
+        >
+          {isOperating && (
+            <ContentGrid>
+              <ProgressBar value={progress} className="max-w-[280px]" />
+              <ContentHint>
+                This could take a few minutes, grab a coffee ☕
+              </ContentHint>
+            </ContentGrid>
+          )}
+
+          {isAgentSavedOutput(output) && (
+            <ContentGrid>
+              <ContentMessage>{output.message}</ContentMessage>
+              <div className="flex flex-wrap gap-2">
+                <ContentLink href={output.library_agent_link}>
+                  Open in library
+                </ContentLink>
+                <ContentLink href={output.agent_page_link}>
+                  Open in builder
+                </ContentLink>
+              </div>
+              <ContentCodeBlock>
+                {truncateText(
+                  formatMaybeJson({ agent_id: output.agent_id }),
+                  800,
+                )}
+              </ContentCodeBlock>
+            </ContentGrid>
+          )}
+
+          {isAgentPreviewOutput(output) && (
+            <ContentGrid>
+              <ContentMessage>{output.message}</ContentMessage>
+              {output.description?.trim() && (
+                <ContentCardDescription>
+                  {output.description}
+                </ContentCardDescription>
+              )}
+              <ContentCodeBlock>
+                {truncateText(formatMaybeJson(output.agent_json), 1600)}
+              </ContentCodeBlock>
+            </ContentGrid>
+          )}
+
+          {isClarificationNeededOutput(output) && (
+            <ClarificationQuestionsCard
+              questions={(output.questions ?? []).map((q) => {
+                const item: ClarifyingQuestion = {
+                  question: q.question,
+                  keyword: q.keyword,
+                };
+                const example =
+                  typeof q.example === "string" && q.example.trim()
+                    ? q.example.trim()
+                    : null;
+                if (example) item.example = example;
+                return item;
+              })}
+              message={output.message}
+              onSubmitAnswers={handleClarificationAnswers}
+            />
+          )}
+
+          {isErrorOutput(output) && (
+            <ContentGrid>
+              <ContentMessage>{output.message}</ContentMessage>
+              {output.error && (
+                <ContentCodeBlock>
+                  {formatMaybeJson(output.error)}
+                </ContentCodeBlock>
+              )}
+              {output.details && (
+                <ContentCodeBlock>
+                  {formatMaybeJson(output.details)}
+                </ContentCodeBlock>
+              )}
+            </ContentGrid>
+          )}
+        </ToolAccordion>
+      )}
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/EditAgent/helpers.tsx

@@ -0,0 +1,188 @@
+import type { AgentPreviewResponse } from "@/app/api/__generated__/models/agentPreviewResponse";
+import type { AgentSavedResponse } from "@/app/api/__generated__/models/agentSavedResponse";
+import type { ClarificationNeededResponse } from "@/app/api/__generated__/models/clarificationNeededResponse";
+import type { ErrorResponse } from "@/app/api/__generated__/models/errorResponse";
+import type { OperationInProgressResponse } from "@/app/api/__generated__/models/operationInProgressResponse";
+import type { OperationPendingResponse } from "@/app/api/__generated__/models/operationPendingResponse";
+import type { OperationStartedResponse } from "@/app/api/__generated__/models/operationStartedResponse";
+import { ResponseType } from "@/app/api/__generated__/models/responseType";
+import {
+  NotePencilIcon,
+  PencilLineIcon,
+  WarningDiamondIcon,
+} from "@phosphor-icons/react";
+import type { ToolUIPart } from "ai";
+import { OrbitLoader } from "../../components/OrbitLoader/OrbitLoader";
+
+export type EditAgentToolOutput =
+  | OperationStartedResponse
+  | OperationPendingResponse
+  | OperationInProgressResponse
+  | AgentPreviewResponse
+  | AgentSavedResponse
+  | ClarificationNeededResponse
+  | ErrorResponse;
+
+function parseOutput(output: unknown): EditAgentToolOutput | null {
+  if (!output) return null;
+  if (typeof output === "string") {
+    const trimmed = output.trim();
+    if (!trimmed) return null;
+    try {
+      return parseOutput(JSON.parse(trimmed) as unknown);
+    } catch {
+      return null;
+    }
+  }
+  if (typeof output === "object") {
+    const type = (output as { type?: unknown }).type;
+    if (
+      type === ResponseType.operation_started ||
+      type === ResponseType.operation_pending ||
+      type === ResponseType.operation_in_progress ||
+      type === ResponseType.agent_preview ||
+      type === ResponseType.agent_saved ||
+      type === ResponseType.clarification_needed ||
+      type === ResponseType.error
+    ) {
+      return output as EditAgentToolOutput;
+    }
+    if ("operation_id" in output && "tool_name" in output)
+      return output as OperationStartedResponse | OperationPendingResponse;
+    if ("tool_call_id" in output) return output as OperationInProgressResponse;
+    if ("agent_json" in output && "agent_name" in output)
+      return output as AgentPreviewResponse;
+    if ("agent_id" in output && "library_agent_id" in output)
+      return output as AgentSavedResponse;
+    if ("questions" in output) return output as ClarificationNeededResponse;
+    if ("error" in output || "details" in output)
+      return output as ErrorResponse;
+  }
+  return null;
+}
+
+export function getEditAgentToolOutput(
+  part: unknown,
+): EditAgentToolOutput | null {
+  if (!part || typeof part !== "object") return null;
+  return parseOutput((part as { output?: unknown }).output);
+}
+
+export function isOperationStartedOutput(
+  output: EditAgentToolOutput,
+): output is OperationStartedResponse {
+  return (
+    output.type === ResponseType.operation_started ||
+    ("operation_id" in output && "tool_name" in output)
+  );
+}
+
+export function isOperationPendingOutput(
+  output: EditAgentToolOutput,
+): output is OperationPendingResponse {
+  return output.type === ResponseType.operation_pending;
+}
+
+export function isOperationInProgressOutput(
+  output: EditAgentToolOutput,
+): output is OperationInProgressResponse {
+  return (
+    output.type === ResponseType.operation_in_progress ||
+    "tool_call_id" in output
+  );
+}
+
+export function isAgentPreviewOutput(
+  output: EditAgentToolOutput,
+): output is AgentPreviewResponse {
+  return output.type === ResponseType.agent_preview || "agent_json" in output;
+}
+
+export function isAgentSavedOutput(
+  output: EditAgentToolOutput,
+): output is AgentSavedResponse {
+  return (
+    output.type === ResponseType.agent_saved || "agent_page_link" in output
+  );
+}
+
+export function isClarificationNeededOutput(
+  output: EditAgentToolOutput,
+): output is ClarificationNeededResponse {
+  return (
+    output.type === ResponseType.clarification_needed || "questions" in output
+  );
+}
+
+export function isErrorOutput(
+  output: EditAgentToolOutput,
+): output is ErrorResponse {
+  return output.type === ResponseType.error || "error" in output;
+}
+
+export function getAnimationText(part: {
+  state: ToolUIPart["state"];
+  input?: unknown;
+  output?: unknown;
+}): string {
+  switch (part.state) {
+    case "input-streaming":
+    case "input-available":
+      return "Editing the agent";
+    case "output-available": {
+      const output = parseOutput(part.output);
+      if (!output) return "Editing the agent";
+      if (isOperationStartedOutput(output)) return "Agent update started";
+      if (isOperationPendingOutput(output)) return "Agent update in progress";
+      if (isOperationInProgressOutput(output))
+        return "Agent update already in progress";
+      if (isAgentSavedOutput(output)) return `Saved "${output.agent_name}"`;
+      if (isAgentPreviewOutput(output)) return `Preview "${output.agent_name}"`;
+      if (isClarificationNeededOutput(output)) return "Needs clarification";
+      return "Error editing agent";
+    }
+    case "output-error":
+      return "Error editing agent";
+    default:
+      return "Editing the agent";
+  }
+}
+
+export function ToolIcon({
+  isStreaming,
+  isError,
+}: {
+  isStreaming?: boolean;
+  isError?: boolean;
+}) {
+  if (isError) {
+    return (
+      <WarningDiamondIcon size={14} weight="regular" className="text-red-500" />
+    );
+  }
+  if (isStreaming) {
+    return <OrbitLoader size={24} />;
+  }
+  return (
+    <PencilLineIcon size={14} weight="regular" className="text-neutral-400" />
+  );
+}
+
+export function AccordionIcon() {
+  return <NotePencilIcon size={32} weight="light" />;
+}
+
+export function formatMaybeJson(value: unknown): string {
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+
+export function truncateText(text: string, maxChars: number): string {
+  const trimmed = text.trim();
+  if (trimmed.length <= maxChars) return trimmed;
+  return `${trimmed.slice(0, maxChars).trimEnd()}…`;
+}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/FindAgents/FindAgents.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import { ToolUIPart } from "ai";
+import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
+import {
+  ContentBadge,
+  ContentCard,
+  ContentCardDescription,
+  ContentCardHeader,
+  ContentCardTitle,
+  ContentGrid,
+  ContentLink,
+} from "../../components/ToolAccordion/AccordionContent";
+import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
+import {
+  AccordionIcon,
+  getAgentHref,
+  getAnimationText,
+  getFindAgentsOutput,
+  getSourceLabelFromToolType,
+  isAgentsFoundOutput,
+  isErrorOutput,
+  ToolIcon,
+} from "./helpers";
+
+export interface FindAgentsToolPart {
+  type: string;
+  toolCallId: string;
+  state: ToolUIPart["state"];
+  input?: unknown;
+  output?: unknown;
+}
+
+interface Props {
+  part: FindAgentsToolPart;
+}
+
+export function FindAgentsTool({ part }: Props) {
+  const text = getAnimationText(part);
+  const output = getFindAgentsOutput(part);
+  const isStreaming =
+    part.state === "input-streaming" || part.state === "input-available";
+  const isError =
+    part.state === "output-error" || (!!output && isErrorOutput(output));
+
+  const query =
+    typeof part.input === "object" && part.input !== null
+      ? String((part.input as { query?: unknown }).query ?? "").trim()
+      : "";
+
+  const agentsFoundOutput =
+    part.state === "output-available" && output && isAgentsFoundOutput(output)
+      ? output
+      : null;
+
+  const hasAgents =
+    !!agentsFoundOutput &&
+    agentsFoundOutput.agents.length > 0 &&
+    (typeof agentsFoundOutput.count !== "number" ||
+      agentsFoundOutput.count > 0);
+  const totalCount = agentsFoundOutput ? agentsFoundOutput.count : 0;
+  const { source } = getSourceLabelFromToolType(part.type);
+  const scopeText =
+    source === "library"
+      ? "in your library"
+      : source === "marketplace"
+        ? "in marketplace"
+        : "";
+  const accordionDescription = `Found ${totalCount}${scopeText ? ` ${scopeText}` : ""}${
+    query ? ` for "${query}"` : ""
+  }`;
+
+  return (
+    <div className="py-2">
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <ToolIcon
+          toolType={part.type}
+          isStreaming={isStreaming}
+          isError={isError}
+        />
+        <MorphingTextAnimation
+          text={text}
+          className={isError ? "text-red-500" : undefined}
+        />
+      </div>
+
+      {hasAgents && agentsFoundOutput && (
+        <ToolAccordion
+          icon={<AccordionIcon toolType={part.type} />}
+          title="Agent results"
+          description={accordionDescription}
+        >
+          <ContentGrid className="sm:grid-cols-2">
+            {agentsFoundOutput.agents.map((agent) => {
+              const href = getAgentHref(agent);
+              const agentSource =
+                agent.source === "library"
+                  ? "Library"
+                  : agent.source === "marketplace"
+                    ? "Marketplace"
+                    : null;
+              return (
+                <ContentCard key={agent.id}>
+                  <ContentCardHeader
+                    action={
+                      href ? <ContentLink href={href}>Open</ContentLink> : null
+                    }
+                  >
+                    <div className="flex items-center gap-2">
+                      <ContentCardTitle>{agent.name}</ContentCardTitle>
+                      {agentSource && (
+                        <ContentBadge>{agentSource}</ContentBadge>
+                      )}
+                    </div>
+                    <ContentCardDescription className="mt-1 line-clamp-2">
+                      {agent.description}
+                    </ContentCardDescription>
+                  </ContentCardHeader>
+                </ContentCard>
+              );
+            })}
+          </ContentGrid>
+        </ToolAccordion>
+      )}
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/FindAgents/helpers.tsx

@@ -0,0 +1,187 @@
+import type { AgentInfo } from "@/app/api/__generated__/models/agentInfo";
+import type { AgentsFoundResponse } from "@/app/api/__generated__/models/agentsFoundResponse";
+import type { ErrorResponse } from "@/app/api/__generated__/models/errorResponse";
+import type { NoResultsResponse } from "@/app/api/__generated__/models/noResultsResponse";
+import { ResponseType } from "@/app/api/__generated__/models/responseType";
+import {
+  FolderOpenIcon,
+  MagnifyingGlassIcon,
+  SquaresFourIcon,
+  StorefrontIcon,
+} from "@phosphor-icons/react";
+import { ToolUIPart } from "ai";
+
+export interface FindAgentInput {
+  query: string;
+}
+
+export type FindAgentsOutput =
+  | AgentsFoundResponse
+  | NoResultsResponse
+  | ErrorResponse;
+
+export type FindAgentsToolType =
+  | "tool-find_agent"
+  | "tool-find_library_agent"
+  | (string & {});
+
+function parseOutput(output: unknown): FindAgentsOutput | null {
+  if (!output) return null;
+  if (typeof output === "string") {
+    const trimmed = output.trim();
+    if (!trimmed) return null;
+    try {
+      return parseOutput(JSON.parse(trimmed) as unknown);
+    } catch {
+      return null;
+    }
+  }
+  if (typeof output === "object") {
+    const type = (output as { type?: unknown }).type;
+    if (
+      type === ResponseType.agents_found ||
+      type === ResponseType.no_results ||
+      type === ResponseType.error
+    ) {
+      return output as FindAgentsOutput;
+    }
+    if ("agents" in output && "count" in output)
+      return output as AgentsFoundResponse;
+    if ("suggestions" in output && !("error" in output))
+      return output as NoResultsResponse;
+    if ("error" in output || "details" in output)
+      return output as ErrorResponse;
+  }
+  return null;
+}
+
+export function getFindAgentsOutput(part: unknown): FindAgentsOutput | null {
+  if (!part || typeof part !== "object") return null;
+  return parseOutput((part as { output?: unknown }).output);
+}
+
+export function isAgentsFoundOutput(
+  output: FindAgentsOutput,
+): output is AgentsFoundResponse {
+  return output.type === ResponseType.agents_found || "agents" in output;
+}
+
+export function isNoResultsOutput(
+  output: FindAgentsOutput,
+): output is NoResultsResponse {
+  return (
+    output.type === ResponseType.no_results ||
+    ("suggestions" in output && !("error" in output))
+  );
+}
+
+export function isErrorOutput(
+  output: FindAgentsOutput,
+): output is ErrorResponse {
+  return output.type === ResponseType.error || "error" in output;
+}
+
+export function getSourceLabelFromToolType(toolType?: FindAgentsToolType): {
+  source: "marketplace" | "library" | "unknown";
+  label: string;
+} {
+  if (toolType === "tool-find_library_agent") {
+    return { source: "library", label: "Library" };
+  }
+  if (toolType === "tool-find_agent") {
+    return { source: "marketplace", label: "Marketplace" };
+  }
+  return { source: "unknown", label: "Agents" };
+}
+
+export function getAnimationText(part: {
+  type?: FindAgentsToolType;
+  state: ToolUIPart["state"];
+  input?: unknown;
+  output?: unknown;
+}): string {
+  const { source } = getSourceLabelFromToolType(part.type);
+  const query = (part.input as FindAgentInput | undefined)?.query?.trim();
+
+  // Action phrase matching legacy ToolCallMessage
+  const actionPhrase =
+    source === "library"
+      ? "Looking for library agents"
+      : "Looking for agents in the marketplace";
+
+  const queryText = query ? ` matching "${query}"` : "";
+
+  switch (part.state) {
+    case "input-streaming":
+    case "input-available":
+      return `${actionPhrase}${queryText}`;
+
+    case "output-available": {
+      const output = parseOutput(part.output);
+      if (!output) {
+        return `${actionPhrase}${queryText}`;
+      }
+      if (isNoResultsOutput(output)) {
+        return `No agents found${queryText}`;
+      }
+      if (isAgentsFoundOutput(output)) {
+        const count = output.count ?? output.agents?.length ?? 0;
+        return `Found ${count} agent${count === 1 ? "" : "s"}${queryText}`;
+      }
+      if (isErrorOutput(output)) {
+        return `Error finding agents${queryText}`;
+      }
+      return `${actionPhrase}${queryText}`;
+    }
+
+    case "output-error":
+      return `Error finding agents${queryText}`;
+
+    default:
+      return actionPhrase;
+  }
+}
+
+export function getAgentHref(agent: AgentInfo): string | null {
+  if (agent.source === "library") {
+    return `/library/agents/${encodeURIComponent(agent.id)}`;
+  }
+
+  const [creator, slug, ...rest] = agent.id.split("/");
+  if (!creator || !slug || rest.length > 0) return null;
+  return `/marketplace/agent/${encodeURIComponent(creator)}/${encodeURIComponent(slug)}`;
+}
+
+export function ToolIcon({
+  toolType,
+  isStreaming,
+  isError,
+}: {
+  toolType?: FindAgentsToolType;
+  isStreaming?: boolean;
+  isError?: boolean;
+}) {
+  const { source } = getSourceLabelFromToolType(toolType);
+  const IconComponent =
+    source === "library" ? MagnifyingGlassIcon : SquaresFourIcon;
+
+  return (
+    <IconComponent
+      size={14}
+      weight="regular"
+      className={
+        isError
+          ? "text-red-500"
+          : isStreaming
+            ? "text-neutral-500"
+            : "text-neutral-400"
+      }
+    />
+  );
+}
+
+export function AccordionIcon({ toolType }: { toolType?: FindAgentsToolType }) {
+  const { source } = getSourceLabelFromToolType(toolType);
+  const IconComponent = source === "library" ? FolderOpenIcon : StorefrontIcon;
+  return <IconComponent size={32} weight="light" />;
+}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/FindBlocks/FindBlocks.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
+import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
+import {
+  ContentCard,
+  ContentCardDescription,
+  ContentCardTitle,
+} from "../../components/ToolAccordion/AccordionContent";
+import type { BlockListResponse } from "@/app/api/__generated__/models/blockListResponse";
+import type { BlockInfoSummary } from "@/app/api/__generated__/models/blockInfoSummary";
+import { ToolUIPart } from "ai";
+import { HorizontalScroll } from "@/app/(platform)/build/components/NewControlPanel/NewBlockMenu/HorizontalScroll";
+import {
+  AccordionIcon,
+  getAnimationText,
+  parseOutput,
+  ToolIcon,
+} from "./helpers";
+
+export interface FindBlockInput {
+  query: string;
+}
+
+export type FindBlockOutput = BlockListResponse;
+
+export interface FindBlockToolPart {
+  type: string;
+  toolName?: string;
+  toolCallId: string;
+  state: ToolUIPart["state"];
+  input?: FindBlockInput | unknown;
+  output?: string | FindBlockOutput | unknown;
+  title?: string;
+}
+
+interface Props {
+  part: FindBlockToolPart;
+}
+
+function BlockCard({ block }: { block: BlockInfoSummary }) {
+  return (
+    <ContentCard className="w-48 shrink-0">
+      <ContentCardTitle>{block.name}</ContentCardTitle>
+      <ContentCardDescription className="mt-1 line-clamp-2">
+        {block.description}
+      </ContentCardDescription>
+    </ContentCard>
+  );
+}
+
+export function FindBlocksTool({ part }: Props) {
+  const text = getAnimationText(part);
+  const isStreaming =
+    part.state === "input-streaming" || part.state === "input-available";
+  const isError = part.state === "output-error";
+
+  const parsed =
+    part.state === "output-available" ? parseOutput(part.output) : null;
+  const hasBlocks = !!parsed && parsed.blocks.length > 0;
+
+  const query = (part.input as FindBlockInput | undefined)?.query?.trim();
+  const accordionDescription = parsed
+    ? `Found ${parsed.count} block${parsed.count === 1 ? "" : "s"}${query ? ` for "${query}"` : ""}`
+    : undefined;
+
+  return (
+    <div className="py-2">
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <ToolIcon isStreaming={isStreaming} isError={isError} />
+        <MorphingTextAnimation
+          text={text}
+          className={isError ? "text-red-500" : undefined}
+        />
+      </div>
+
+      {hasBlocks && parsed && (
+        <ToolAccordion
+          icon={<AccordionIcon />}
+          title="Block results"
+          description={accordionDescription}
+        >
+          <HorizontalScroll dependencyList={[parsed.blocks.length]}>
+            {parsed.blocks.map((block) => (
+              <BlockCard key={block.id} block={block} />
+            ))}
+          </HorizontalScroll>
+        </ToolAccordion>
+      )}
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/FindBlocks/helpers.tsx

@@ -0,0 +1,75 @@
+import type { BlockListResponse } from "@/app/api/__generated__/models/blockListResponse";
+import { ResponseType } from "@/app/api/__generated__/models/responseType";
+import { CubeIcon, PackageIcon } from "@phosphor-icons/react";
+import { FindBlockInput, FindBlockToolPart } from "./FindBlocks";
+
+export function parseOutput(output: unknown): BlockListResponse | null {
+  if (!output) return null;
+  if (typeof output === "string") {
+    const trimmed = output.trim();
+    if (!trimmed) return null;
+    try {
+      return parseOutput(JSON.parse(trimmed) as unknown);
+    } catch {
+      return null;
+    }
+  }
+  if (typeof output === "object") {
+    const type = (output as { type?: unknown }).type;
+    if (type === ResponseType.block_list || "blocks" in output) {
+      return output as BlockListResponse;
+    }
+  }
+  return null;
+}
+
+export function getAnimationText(part: FindBlockToolPart): string {
+  const query = (part.input as FindBlockInput | undefined)?.query?.trim();
+  const queryText = query ? ` matching "${query}"` : "";
+
+  switch (part.state) {
+    case "input-streaming":
+    case "input-available":
+      return `Searching for blocks${queryText}`;
+
+    case "output-available": {
+      const parsed = parseOutput(part.output);
+      if (parsed) {
+        return `Found ${parsed.count} block${parsed.count === 1 ? "" : "s"}${queryText}`;
+      }
+      return `Searching for blocks${queryText}`;
+    }
+
+    case "output-error":
+      return `Error finding blocks${queryText}`;
+
+    default:
+      return "Searching for blocks";
+  }
+}
+
+export function ToolIcon({
+  isStreaming,
+  isError,
+}: {
+  isStreaming?: boolean;
+  isError?: boolean;
+}) {
+  return (
+    <PackageIcon
+      size={14}
+      weight="regular"
+      className={
+        isError
+          ? "text-red-500"
+          : isStreaming
+            ? "text-neutral-500"
+            : "text-neutral-400"
+      }
+    />
+  );
+}
+
+export function AccordionIcon() {
+  return <CubeIcon size={32} weight="light" />;
+}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunAgent/RunAgent.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import type { ToolUIPart } from "ai";
+import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
+import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
+import { ContentMessage } from "../../components/ToolAccordion/AccordionContent";
+import {
+  getAccordionMeta,
+  getAnimationText,
+  getRunAgentToolOutput,
+  isRunAgentAgentDetailsOutput,
+  isRunAgentErrorOutput,
+  isRunAgentExecutionStartedOutput,
+  isRunAgentNeedLoginOutput,
+  isRunAgentSetupRequirementsOutput,
+  ToolIcon,
+} from "./helpers";
+import { ExecutionStartedCard } from "./components/ExecutionStartedCard/ExecutionStartedCard";
+import { AgentDetailsCard } from "./components/AgentDetailsCard/AgentDetailsCard";
+import { SetupRequirementsCard } from "./components/SetupRequirementsCard/SetupRequirementsCard";
+import { ErrorCard } from "./components/ErrorCard/ErrorCard";
+
+export interface RunAgentToolPart {
+  type: string;
+  toolCallId: string;
+  state: ToolUIPart["state"];
+  input?: unknown;
+  output?: unknown;
+}
+
+interface Props {
+  part: RunAgentToolPart;
+}
+
+export function RunAgentTool({ part }: Props) {
+  const text = getAnimationText(part);
+  const isStreaming =
+    part.state === "input-streaming" || part.state === "input-available";
+
+  const output = getRunAgentToolOutput(part);
+  const isError =
+    part.state === "output-error" ||
+    (!!output && isRunAgentErrorOutput(output));
+  const hasExpandableContent =
+    part.state === "output-available" &&
+    !!output &&
+    (isRunAgentExecutionStartedOutput(output) ||
+      isRunAgentAgentDetailsOutput(output) ||
+      isRunAgentSetupRequirementsOutput(output) ||
+      isRunAgentNeedLoginOutput(output) ||
+      isRunAgentErrorOutput(output));
+
+  return (
+    <div className="py-2">
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <ToolIcon isStreaming={isStreaming} isError={isError} />
+        <MorphingTextAnimation
+          text={text}
+          className={isError ? "text-red-500" : undefined}
+        />
+      </div>
+
+      {hasExpandableContent && output && (
+        <ToolAccordion
+          {...getAccordionMeta(output)}
+          defaultExpanded={
+            isRunAgentExecutionStartedOutput(output) ||
+            isRunAgentSetupRequirementsOutput(output) ||
+            isRunAgentAgentDetailsOutput(output)
+          }
+        >
+          {isRunAgentExecutionStartedOutput(output) && (
+            <ExecutionStartedCard output={output} />
+          )}
+
+          {isRunAgentAgentDetailsOutput(output) && (
+            <AgentDetailsCard output={output} />
+          )}
+
+          {isRunAgentSetupRequirementsOutput(output) && (
+            <SetupRequirementsCard output={output} />
+          )}
+
+          {isRunAgentNeedLoginOutput(output) && (
+            <ContentMessage>{output.message}</ContentMessage>
+          )}
+
+          {isRunAgentErrorOutput(output) && <ErrorCard output={output} />}
+        </ToolAccordion>
+      )}
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunAgent/components/AgentDetailsCard/AgentDetailsCard.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import type { AgentDetailsResponse } from "@/app/api/__generated__/models/agentDetailsResponse";
+import { Button } from "@/components/atoms/Button/Button";
+import { Text } from "@/components/atoms/Text/Text";
+import { FormRenderer } from "@/components/renderers/InputRenderer/FormRenderer";
+import { AnimatePresence, motion } from "framer-motion";
+import { useState } from "react";
+import { useCopilotChatActions } from "../../../../components/CopilotChatActionsProvider/useCopilotChatActions";
+import { ContentMessage } from "../../../../components/ToolAccordion/AccordionContent";
+import { buildInputSchema } from "./helpers";
+
+interface Props {
+  output: AgentDetailsResponse;
+}
+
+export function AgentDetailsCard({ output }: Props) {
+  const { onSend } = useCopilotChatActions();
+  const [showInputForm, setShowInputForm] = useState(false);
+  const [inputValues, setInputValues] = useState<Record<string, unknown>>({});
+
+  function handleRunWithExamples() {
+    onSend(
+      `Run the agent "${output.agent.name}" with placeholder/example values so I can test it.`,
+    );
+  }
+
+  function handleRunWithInputs() {
+    const nonEmpty = Object.fromEntries(
+      Object.entries(inputValues).filter(
+        ([, v]) => v !== undefined && v !== null && v !== "",
+      ),
+    );
+    onSend(
+      `Run the agent "${output.agent.name}" with these inputs: ${JSON.stringify(nonEmpty, null, 2)}`,
+    );
+    setShowInputForm(false);
+    setInputValues({});
+  }
+
+  return (
+    <div className="grid gap-2">
+      <ContentMessage>
+        Run this agent with example values or your own inputs.
+      </ContentMessage>
+
+      <div className="flex gap-2 pt-4">
+        <Button size="small" className="w-fit" onClick={handleRunWithExamples}>
+          Run with example values
+        </Button>
+        <Button
+          variant="outline"
+          size="small"
+          className="w-fit"
+          onClick={() => setShowInputForm((prev) => !prev)}
+        >
+          Run with my inputs
+        </Button>
+      </div>
+
+      <AnimatePresence initial={false}>
+        {showInputForm && buildInputSchema(output.agent.inputs) && (
+          <motion.div
+            initial={{ height: 0, opacity: 0, filter: "blur(6px)" }}
+            animate={{ height: "auto", opacity: 1, filter: "blur(0px)" }}
+            exit={{ height: 0, opacity: 0, filter: "blur(6px)" }}
+            transition={{
+              height: { type: "spring", bounce: 0.15, duration: 0.5 },
+              opacity: { duration: 0.25 },
+              filter: { duration: 0.2 },
+            }}
+            className="overflow-hidden"
+            style={{ willChange: "height, opacity, filter" }}
+          >
+            <div className="mt-4 rounded-2xl border bg-background p-3 pt-4">
+              <Text variant="body-medium">Enter your inputs</Text>
+              <FormRenderer
+                jsonSchema={buildInputSchema(output.agent.inputs)!}
+                handleChange={(v) => setInputValues(v.formData ?? {})}
+                uiSchema={{
+                  "ui:submitButtonOptions": { norender: true },
+                }}
+                initialValues={inputValues}
+                formContext={{
+                  showHandles: false,
+                  size: "small",
+                }}
+              />
+              <div className="-mt-8 flex gap-2">
+                <Button
+                  variant="primary"
+                  size="small"
+                  className="w-fit"
+                  onClick={handleRunWithInputs}
+                >
+                  Run
+                </Button>
+                <Button
+                  variant="secondary"
+                  size="small"
+                  className="w-fit"
+                  onClick={() => {
+                    setShowInputForm(false);
+                    setInputValues({});
+                  }}
+                >
+                  Cancel
+                </Button>
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunAgent/components/AgentDetailsCard/helpers.ts

@@ -0,0 +1,8 @@
+import type { RJSFSchema } from "@rjsf/utils";
+
+export function buildInputSchema(inputs: unknown): RJSFSchema | null {
+  if (!inputs || typeof inputs !== "object") return null;
+  const properties = inputs as RJSFSchema["properties"];
+  if (!properties || Object.keys(properties).length === 0) return null;
+  return inputs as RJSFSchema;
+}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunAgent/components/ErrorCard/ErrorCard.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import type { ErrorResponse } from "@/app/api/__generated__/models/errorResponse";
+import {
+  ContentCodeBlock,
+  ContentGrid,
+  ContentMessage,
+} from "../../../../components/ToolAccordion/AccordionContent";
+import { formatMaybeJson } from "../../helpers";
+
+interface Props {
+  output: ErrorResponse;
+}
+
+export function ErrorCard({ output }: Props) {
+  return (
+    <ContentGrid>
+      <ContentMessage>{output.message}</ContentMessage>
+      {output.error && (
+        <ContentCodeBlock>{formatMaybeJson(output.error)}</ContentCodeBlock>
+      )}
+      {output.details && (
+        <ContentCodeBlock>{formatMaybeJson(output.details)}</ContentCodeBlock>
+      )}
+    </ContentGrid>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunAgent/components/ExecutionStartedCard/ExecutionStartedCard.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import type { ExecutionStartedResponse } from "@/app/api/__generated__/models/executionStartedResponse";
+import { Button } from "@/components/atoms/Button/Button";
+import { useRouter } from "next/navigation";
+import {
+  ContentCard,
+  ContentCardDescription,
+  ContentCardSubtitle,
+  ContentCardTitle,
+  ContentGrid,
+} from "../../../../components/ToolAccordion/AccordionContent";
+
+interface Props {
+  output: ExecutionStartedResponse;
+}
+
+export function ExecutionStartedCard({ output }: Props) {
+  const router = useRouter();
+
+  return (
+    <ContentGrid>
+      <ContentCard>
+        <ContentCardTitle>Execution started</ContentCardTitle>
+        <ContentCardSubtitle>{output.execution_id}</ContentCardSubtitle>
+        <ContentCardDescription>{output.message}</ContentCardDescription>
+        {output.library_agent_link && (
+          <Button
+            size="small"
+            className="mt-3"
+            onClick={() => router.push(output.library_agent_link!)}
+          >
+            View Execution
+          </Button>
+        )}
+      </ContentCard>
+    </ContentGrid>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunAgent/components/SetupRequirementsCard/SetupRequirementsCard.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { useState } from "react";
+import { CredentialsGroupedView } from "@/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView";
+import { Button } from "@/components/atoms/Button/Button";
+import type { CredentialsMetaInput } from "@/lib/autogpt-server-api/types";
+import type { SetupRequirementsResponse } from "@/app/api/__generated__/models/setupRequirementsResponse";
+import { useCopilotChatActions } from "../../../../components/CopilotChatActionsProvider/useCopilotChatActions";
+import {
+  ContentBadge,
+  ContentCardDescription,
+  ContentCardTitle,
+  ContentMessage,
+} from "../../../../components/ToolAccordion/AccordionContent";
+import { coerceCredentialFields, coerceExpectedInputs } from "./helpers";
+
+interface Props {
+  output: SetupRequirementsResponse;
+}
+
+export function SetupRequirementsCard({ output }: Props) {
+  const { onSend } = useCopilotChatActions();
+
+  const [inputCredentials, setInputCredentials] = useState<
+    Record<string, CredentialsMetaInput | undefined>
+  >({});
+  const [hasSent, setHasSent] = useState(false);
+
+  const { credentialFields, requiredCredentials } = coerceCredentialFields(
+    output.setup_info.user_readiness?.missing_credentials,
+  );
+
+  const expectedInputs = coerceExpectedInputs(
+    (output.setup_info.requirements as Record<string, unknown>)?.inputs,
+  );
+
+  function handleCredentialChange(key: string, value?: CredentialsMetaInput) {
+    setInputCredentials((prev) => ({ ...prev, [key]: value }));
+  }
+
+  const isAllComplete =
+    credentialFields.length > 0 &&
+    [...requiredCredentials].every((key) => !!inputCredentials[key]);
+
+  function handleProceed() {
+    setHasSent(true);
+    onSend(
+      "I've configured the required credentials. Please check if everything is ready and proceed with running the agent.",
+    );
+  }
+
+  return (
+    <div className="grid gap-2">
+      <ContentMessage>{output.message}</ContentMessage>
+
+      {credentialFields.length > 0 && (
+        <div className="rounded-2xl border bg-background p-3">
+          <CredentialsGroupedView
+            credentialFields={credentialFields}
+            requiredCredentials={requiredCredentials}
+            inputCredentials={inputCredentials}
+            inputValues={{}}
+            onCredentialChange={handleCredentialChange}
+          />
+          {isAllComplete && !hasSent && (
+            <Button
+              variant="primary"
+              size="small"
+              className="mt-3 w-full"
+              onClick={handleProceed}
+            >
+              Proceed
+            </Button>
+          )}
+        </div>
+      )}
+
+      {expectedInputs.length > 0 && (
+        <div className="rounded-2xl border bg-background p-3">
+          <ContentCardTitle className="text-xs">
+            Expected inputs
+          </ContentCardTitle>
+          <div className="mt-2 grid gap-2">
+            {expectedInputs.map((input) => (
+              <div key={input.name} className="rounded-xl border p-2">
+                <div className="flex items-center justify-between gap-2">
+                  <ContentCardTitle className="text-xs">
+                    {input.title}
+                  </ContentCardTitle>
+                  <ContentBadge>
+                    {input.required ? "Required" : "Optional"}
+                  </ContentBadge>
+                </div>
+                <ContentCardDescription className="mt-1">
+                  {input.name} &bull; {input.type}
+                  {input.description ? ` \u2022 ${input.description}` : ""}
+                </ContentCardDescription>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunAgent/components/SetupRequirementsCard/helpers.ts

@@ -0,0 +1,116 @@
+import type { CredentialField } from "@/components/contextual/CredentialsInput/components/CredentialsGroupedView/helpers";
+
+const VALID_CREDENTIAL_TYPES = new Set([
+  "api_key",
+  "oauth2",
+  "user_password",
+  "host_scoped",
+]);
+
+/**
+ * Transforms raw missing_credentials from SetupRequirementsResponse
+ * into CredentialField[] tuples compatible with CredentialsGroupedView.
+ *
+ * Each CredentialField is [key, schema] where schema matches
+ * BlockIOCredentialsSubSchema shape.
+ */
+export function coerceCredentialFields(rawMissingCredentials: unknown): {
+  credentialFields: CredentialField[];
+  requiredCredentials: Set<string>;
+} {
+  const missing =
+    rawMissingCredentials && typeof rawMissingCredentials === "object"
+      ? (rawMissingCredentials as Record<string, unknown>)
+      : {};
+
+  const credentialFields: CredentialField[] = [];
+  const requiredCredentials = new Set<string>();
+
+  Object.entries(missing).forEach(([key, value]) => {
+    if (!value || typeof value !== "object") return;
+    const cred = value as Record<string, unknown>;
+
+    const provider =
+      typeof cred.provider === "string" ? cred.provider.trim() : "";
+    if (!provider) return;
+
+    const types =
+      Array.isArray(cred.types) && cred.types.length > 0
+        ? cred.types
+        : typeof cred.type === "string"
+          ? [cred.type]
+          : [];
+
+    const credentialTypes = types
+      .map((t) => (typeof t === "string" ? t.trim() : ""))
+      .filter((t) => VALID_CREDENTIAL_TYPES.has(t));
+
+    if (credentialTypes.length === 0) return;
+
+    const scopes = Array.isArray(cred.scopes)
+      ? cred.scopes.filter((s): s is string => typeof s === "string")
+      : undefined;
+
+    const schema = {
+      type: "object" as const,
+      properties: {},
+      credentials_provider: [provider],
+      credentials_types: credentialTypes,
+      credentials_scopes: scopes,
+    };
+
+    credentialFields.push([key, schema]);
+    requiredCredentials.add(key);
+  });
+
+  return { credentialFields, requiredCredentials };
+}
+
+export function coerceExpectedInputs(rawInputs: unknown): Array<{
+  name: string;
+  title: string;
+  type: string;
+  description?: string;
+  required: boolean;
+}> {
+  if (!Array.isArray(rawInputs)) return [];
+  const results: Array<{
+    name: string;
+    title: string;
+    type: string;
+    description?: string;
+    required: boolean;
+  }> = [];
+
+  rawInputs.forEach((value, index) => {
+    if (!value || typeof value !== "object") return;
+    const input = value as Record<string, unknown>;
+
+    const name =
+      typeof input.name === "string" && input.name.trim()
+        ? input.name.trim()
+        : `input-${index}`;
+    const title =
+      typeof input.title === "string" && input.title.trim()
+        ? input.title.trim()
+        : name;
+    const type = typeof input.type === "string" ? input.type : "unknown";
+    const description =
+      typeof input.description === "string" && input.description.trim()
+        ? input.description.trim()
+        : undefined;
+    const required = Boolean(input.required);
+
+    const item: {
+      name: string;
+      title: string;
+      type: string;
+      description?: string;
+      required: boolean;
+    } = { name, title, type, required };
+    if (description) item.description = description;
+    results.push(item);
+  });
+
+  return results;
+}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunAgent/helpers.tsx

@@ -0,0 +1,248 @@
+import type { AgentDetailsResponse } from "@/app/api/__generated__/models/agentDetailsResponse";
+import type { ErrorResponse } from "@/app/api/__generated__/models/errorResponse";
+import type { ExecutionStartedResponse } from "@/app/api/__generated__/models/executionStartedResponse";
+import type { NeedLoginResponse } from "@/app/api/__generated__/models/needLoginResponse";
+import { ResponseType } from "@/app/api/__generated__/models/responseType";
+import type { SetupRequirementsResponse } from "@/app/api/__generated__/models/setupRequirementsResponse";
+import {
+  PlayIcon,
+  RocketLaunchIcon,
+  WarningDiamondIcon,
+} from "@phosphor-icons/react";
+import type { ToolUIPart } from "ai";
+import { SpinnerLoader } from "../../components/SpinnerLoader/SpinnerLoader";
+
+export interface RunAgentInput {
+  username_agent_slug?: string;
+  library_agent_id?: string;
+  inputs?: Record<string, unknown>;
+  use_defaults?: boolean;
+  schedule_name?: string;
+  cron?: string;
+  timezone?: string;
+}
+
+export type RunAgentToolOutput =
+  | SetupRequirementsResponse
+  | ExecutionStartedResponse
+  | AgentDetailsResponse
+  | NeedLoginResponse
+  | ErrorResponse;
+
+const RUN_AGENT_OUTPUT_TYPES = new Set<string>([
+  ResponseType.setup_requirements,
+  ResponseType.execution_started,
+  ResponseType.agent_details,
+  ResponseType.need_login,
+  ResponseType.error,
+]);
+
+export function isRunAgentSetupRequirementsOutput(
+  output: RunAgentToolOutput,
+): output is SetupRequirementsResponse {
+  return (
+    output.type === ResponseType.setup_requirements ||
+    ("setup_info" in output && typeof output.setup_info === "object")
+  );
+}
+
+export function isRunAgentExecutionStartedOutput(
+  output: RunAgentToolOutput,
+): output is ExecutionStartedResponse {
+  return (
+    output.type === ResponseType.execution_started || "execution_id" in output
+  );
+}
+
+export function isRunAgentAgentDetailsOutput(
+  output: RunAgentToolOutput,
+): output is AgentDetailsResponse {
+  return output.type === ResponseType.agent_details || "agent" in output;
+}
+
+export function isRunAgentNeedLoginOutput(
+  output: RunAgentToolOutput,
+): output is NeedLoginResponse {
+  return output.type === ResponseType.need_login;
+}
+
+export function isRunAgentErrorOutput(
+  output: RunAgentToolOutput,
+): output is ErrorResponse {
+  return output.type === ResponseType.error || "error" in output;
+}
+
+function parseOutput(output: unknown): RunAgentToolOutput | null {
+  if (!output) return null;
+  if (typeof output === "string") {
+    const trimmed = output.trim();
+    if (!trimmed) return null;
+    try {
+      return parseOutput(JSON.parse(trimmed) as unknown);
+    } catch {
+      return null;
+    }
+  }
+  if (typeof output === "object") {
+    const type = (output as { type?: unknown }).type;
+    if (typeof type === "string" && RUN_AGENT_OUTPUT_TYPES.has(type)) {
+      return output as RunAgentToolOutput;
+    }
+    if ("execution_id" in output) return output as ExecutionStartedResponse;
+    if ("setup_info" in output) return output as SetupRequirementsResponse;
+    if ("agent" in output) return output as AgentDetailsResponse;
+    if ("error" in output || "details" in output)
+      return output as ErrorResponse;
+    if (type === ResponseType.need_login) return output as NeedLoginResponse;
+  }
+  return null;
+}
+
+export function getRunAgentToolOutput(
+  part: unknown,
+): RunAgentToolOutput | null {
+  if (!part || typeof part !== "object") return null;
+  return parseOutput((part as { output?: unknown }).output);
+}
+
+function getAgentIdentifierText(
+  input: RunAgentInput | undefined,
+): string | null {
+  if (!input) return null;
+  const slug = input.username_agent_slug?.trim();
+  if (slug) return slug;
+  const libraryId = input.library_agent_id?.trim();
+  if (libraryId) return `Library agent ${libraryId}`;
+  return null;
+}
+
+export function getAnimationText(part: {
+  state: ToolUIPart["state"];
+  input?: unknown;
+  output?: unknown;
+}): string {
+  const input = part.input as RunAgentInput | undefined;
+  const agentIdentifier = getAgentIdentifierText(input);
+  const isSchedule = Boolean(
+    input?.schedule_name?.trim() || input?.cron?.trim(),
+  );
+  const actionPhrase = isSchedule
+    ? "Scheduling the agent to run"
+    : "Running the agent";
+  const identifierText = agentIdentifier ? ` "${agentIdentifier}"` : "";
+
+  switch (part.state) {
+    case "input-streaming":
+    case "input-available":
+      return `${actionPhrase}${identifierText}`;
+    case "output-available": {
+      const output = parseOutput(part.output);
+      if (!output) return `${actionPhrase}${identifierText}`;
+      if (isRunAgentExecutionStartedOutput(output)) {
+        return `Started "${output.graph_name}"`;
+      }
+      if (isRunAgentAgentDetailsOutput(output)) {
+        return `Agent inputs needed for "${output.agent.name}"`;
+      }
+      if (isRunAgentSetupRequirementsOutput(output)) {
+        return `Setup needed for "${output.setup_info.agent_name}"`;
+      }
+      if (isRunAgentNeedLoginOutput(output))
+        return "Sign in required to run agent";
+      return "Error running agent";
+    }
+    case "output-error":
+      return "Error running agent";
+    default:
+      return actionPhrase;
+  }
+}
+
+export function ToolIcon({
+  isStreaming,
+  isError,
+}: {
+  isStreaming?: boolean;
+  isError?: boolean;
+}) {
+  if (isError) {
+    return (
+      <WarningDiamondIcon size={14} weight="regular" className="text-red-500" />
+    );
+  }
+  if (isStreaming) {
+    return <SpinnerLoader size={40} className="text-neutral-700" />;
+  }
+  return <PlayIcon size={14} weight="regular" className="text-neutral-400" />;
+}
+
+export function AccordionIcon() {
+  return <RocketLaunchIcon size={28} weight="light" />;
+}
+
+export function formatMaybeJson(value: unknown): string {
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+
+export function getAccordionMeta(output: RunAgentToolOutput): {
+  icon: React.ReactNode;
+  title: string;
+  titleClassName?: string;
+  description?: string;
+} {
+  const icon = <AccordionIcon />;
+
+  if (isRunAgentExecutionStartedOutput(output)) {
+    const statusText =
+      typeof output.status === "string" && output.status.trim()
+        ? output.status.trim()
+        : "started";
+    return {
+      icon: <SpinnerLoader size={28} className="text-neutral-700" />,
+      title: output.graph_name,
+      description: `Status: ${statusText}`,
+    };
+  }
+
+  if (isRunAgentAgentDetailsOutput(output)) {
+    return {
+      icon,
+      title: output.agent.name,
+      description: "Inputs required",
+    };
+  }
+
+  if (isRunAgentSetupRequirementsOutput(output)) {
+    const missingCredsCount = Object.keys(
+      (output.setup_info.user_readiness?.missing_credentials ?? {}) as Record<
+        string,
+        unknown
+      >,
+    ).length;
+    return {
+      icon,
+      title: output.setup_info.agent_name,
+      description:
+        missingCredsCount > 0
+          ? `Missing ${missingCredsCount} credential${missingCredsCount === 1 ? "" : "s"}`
+          : output.message,
+    };
+  }
+
+  if (isRunAgentNeedLoginOutput(output)) {
+    return { icon, title: "Sign in required" };
+  }
+
+  return {
+    icon: (
+      <WarningDiamondIcon size={28} weight="light" className="text-red-500" />
+    ),
+    title: "Error",
+    titleClassName: "text-red-500",
+  };
+}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/RunBlock.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import type { ToolUIPart } from "ai";
+import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
+import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
+import { BlockOutputCard } from "./components/BlockOutputCard/BlockOutputCard";
+import { ErrorCard } from "./components/ErrorCard/ErrorCard";
+import { SetupRequirementsCard } from "./components/SetupRequirementsCard/SetupRequirementsCard";
+import {
+  getAccordionMeta,
+  getAnimationText,
+  getRunBlockToolOutput,
+  isRunBlockBlockOutput,
+  isRunBlockErrorOutput,
+  isRunBlockSetupRequirementsOutput,
+  ToolIcon,
+} from "./helpers";
+
+export interface RunBlockToolPart {
+  type: string;
+  toolCallId: string;
+  state: ToolUIPart["state"];
+  input?: unknown;
+  output?: unknown;
+}
+
+interface Props {
+  part: RunBlockToolPart;
+}
+
+export function RunBlockTool({ part }: Props) {
+  const text = getAnimationText(part);
+  const isStreaming =
+    part.state === "input-streaming" || part.state === "input-available";
+
+  const output = getRunBlockToolOutput(part);
+  const isError =
+    part.state === "output-error" ||
+    (!!output && isRunBlockErrorOutput(output));
+  const hasExpandableContent =
+    part.state === "output-available" &&
+    !!output &&
+    (isRunBlockBlockOutput(output) ||
+      isRunBlockSetupRequirementsOutput(output) ||
+      isRunBlockErrorOutput(output));
+
+  return (
+    <div className="py-2">
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <ToolIcon isStreaming={isStreaming} isError={isError} />
+        <MorphingTextAnimation
+          text={text}
+          className={isError ? "text-red-500" : undefined}
+        />
+      </div>
+
+      {hasExpandableContent && output && (
+        <ToolAccordion
+          {...getAccordionMeta(output)}
+          defaultExpanded={
+            isRunBlockBlockOutput(output) ||
+            isRunBlockSetupRequirementsOutput(output)
+          }
+        >
+          {isRunBlockBlockOutput(output) && <BlockOutputCard output={output} />}
+
+          {isRunBlockSetupRequirementsOutput(output) && (
+            <SetupRequirementsCard output={output} />
+          )}
+
+          {isRunBlockErrorOutput(output) && <ErrorCard output={output} />}
+        </ToolAccordion>
+      )}
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/components/BlockOutputCard/BlockOutputCard.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import React, { useState } from "react";
+import { getGetWorkspaceDownloadFileByIdUrl } from "@/app/api/__generated__/endpoints/workspace/workspace";
+import { Button } from "@/components/atoms/Button/Button";
+import type { BlockOutputResponse } from "@/app/api/__generated__/models/blockOutputResponse";
+import {
+  globalRegistry,
+  OutputItem,
+} from "@/components/contextual/OutputRenderers";
+import type { OutputMetadata } from "@/components/contextual/OutputRenderers";
+import {
+  ContentBadge,
+  ContentCard,
+  ContentCardTitle,
+  ContentGrid,
+  ContentMessage,
+} from "../../../../components/ToolAccordion/AccordionContent";
+
+interface Props {
+  output: BlockOutputResponse;
+}
+
+const COLLAPSED_LIMIT = 3;
+
+function isWorkspaceRef(value: unknown): value is string {
+  return typeof value === "string" && value.startsWith("workspace://");
+}
+
+function resolveForRenderer(value: unknown): {
+  value: unknown;
+  metadata?: OutputMetadata;
+} {
+  if (!isWorkspaceRef(value)) return { value };
+
+  const withoutPrefix = value.replace("workspace://", "");
+  const fileId = withoutPrefix.split("#")[0];
+  const apiPath = getGetWorkspaceDownloadFileByIdUrl(fileId);
+  const url = `/api/proxy${apiPath}`;
+
+  const hashIndex = value.indexOf("#");
+  const mimeHint =
+    hashIndex !== -1 ? value.slice(hashIndex + 1) || undefined : undefined;
+
+  const metadata: OutputMetadata = {};
+  if (mimeHint) {
+    metadata.mimeType = mimeHint;
+    if (mimeHint.startsWith("image/")) metadata.type = "image";
+    else if (mimeHint.startsWith("video/")) metadata.type = "video";
+  }
+
+  return { value: url, metadata };
+}
+
+function RenderOutputValue({ value }: { value: unknown }) {
+  const resolved = resolveForRenderer(value);
+  const renderer = globalRegistry.getRenderer(
+    resolved.value,
+    resolved.metadata,
+  );
+
+  if (renderer) {
+    return (
+      <OutputItem
+        value={resolved.value}
+        metadata={resolved.metadata}
+        renderer={renderer}
+      />
+    );
+  }
+
+  // Fallback for audio workspace refs
+  if (
+    isWorkspaceRef(value) &&
+    resolved.metadata?.mimeType?.startsWith("audio/")
+  ) {
+    return (
+      <audio controls src={String(resolved.value)} className="mt-2 w-full" />
+    );
+  }
+
+  return null;
+}
+
+function OutputKeySection({
+  outputKey,
+  items,
+}: {
+  outputKey: string;
+  items: unknown[];
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const hasMoreItems = items.length > COLLAPSED_LIMIT;
+  const visibleItems = expanded ? items : items.slice(0, COLLAPSED_LIMIT);
+
+  return (
+    <ContentCard>
+      <div className="flex items-center justify-between gap-2">
+        <ContentCardTitle className="text-xs">{outputKey}</ContentCardTitle>
+        <ContentBadge>
+          {items.length} item{items.length === 1 ? "" : "s"}
+        </ContentBadge>
+      </div>
+      <div className="mt-2">
+        {visibleItems.map((item, i) => (
+          <RenderOutputValue key={i} value={item} />
+        ))}
+      </div>
+      {hasMoreItems && (
+        <Button
+          variant="ghost"
+          size="small"
+          className="mt-1 h-auto px-0 py-0.5 text-[11px] text-muted-foreground"
+          onClick={() => setExpanded((prev) => !prev)}
+        >
+          {expanded ? "Show less" : `Show all ${items.length} items`}
+        </Button>
+      )}
+    </ContentCard>
+  );
+}
+
+export function BlockOutputCard({ output }: Props) {
+  return (
+    <ContentGrid>
+      <ContentMessage>{output.message}</ContentMessage>
+
+      {Object.entries(output.outputs ?? {}).map(([key, items]) => (
+        <OutputKeySection key={key} outputKey={key} items={items} />
+      ))}
+    </ContentGrid>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/components/ErrorCard/ErrorCard.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import type { ErrorResponse } from "@/app/api/__generated__/models/errorResponse";
+import {
+  ContentCodeBlock,
+  ContentGrid,
+  ContentMessage,
+} from "../../../../components/ToolAccordion/AccordionContent";
+import { formatMaybeJson } from "../../helpers";
+
+interface Props {
+  output: ErrorResponse;
+}
+
+export function ErrorCard({ output }: Props) {
+  return (
+    <ContentGrid>
+      <ContentMessage>{output.message}</ContentMessage>
+      {output.error && (
+        <ContentCodeBlock>{formatMaybeJson(output.error)}</ContentCodeBlock>
+      )}
+      {output.details && (
+        <ContentCodeBlock>{formatMaybeJson(output.details)}</ContentCodeBlock>
+      )}
+    </ContentGrid>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/components/SetupRequirementsCard/SetupRequirementsCard.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+import type { SetupRequirementsResponse } from "@/app/api/__generated__/models/setupRequirementsResponse";
+import { Button } from "@/components/atoms/Button/Button";
+import { Text } from "@/components/atoms/Text/Text";
+import { CredentialsGroupedView } from "@/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView";
+import { FormRenderer } from "@/components/renderers/InputRenderer/FormRenderer";
+import type { CredentialsMetaInput } from "@/lib/autogpt-server-api/types";
+import { AnimatePresence, motion } from "framer-motion";
+import { useState } from "react";
+import { useCopilotChatActions } from "../../../../components/CopilotChatActionsProvider/useCopilotChatActions";
+import {
+  ContentBadge,
+  ContentCardDescription,
+  ContentCardTitle,
+  ContentMessage,
+} from "../../../../components/ToolAccordion/AccordionContent";
+import {
+  buildExpectedInputsSchema,
+  coerceCredentialFields,
+  coerceExpectedInputs,
+} from "./helpers";
+
+interface Props {
+  output: SetupRequirementsResponse;
+}
+
+export function SetupRequirementsCard({ output }: Props) {
+  const { onSend } = useCopilotChatActions();
+
+  const [inputCredentials, setInputCredentials] = useState<
+    Record<string, CredentialsMetaInput | undefined>
+  >({});
+  const [hasSentCredentials, setHasSentCredentials] = useState(false);
+
+  const [showInputForm, setShowInputForm] = useState(false);
+  const [inputValues, setInputValues] = useState<Record<string, unknown>>({});
+
+  const { credentialFields, requiredCredentials } = coerceCredentialFields(
+    output.setup_info.user_readiness?.missing_credentials,
+  );
+
+  const expectedInputs = coerceExpectedInputs(
+    (output.setup_info.requirements as Record<string, unknown>)?.inputs,
+  );
+
+  const inputSchema = buildExpectedInputsSchema(expectedInputs);
+
+  function handleCredentialChange(key: string, value?: CredentialsMetaInput) {
+    setInputCredentials((prev) => ({ ...prev, [key]: value }));
+  }
+
+  const isAllCredentialsComplete =
+    credentialFields.length > 0 &&
+    [...requiredCredentials].every((key) => !!inputCredentials[key]);
+
+  function handleProceedCredentials() {
+    setHasSentCredentials(true);
+    onSend(
+      "I've configured the required credentials. Please re-run the block now.",
+    );
+  }
+
+  function handleRunWithInputs() {
+    const nonEmpty = Object.fromEntries(
+      Object.entries(inputValues).filter(
+        ([, v]) => v !== undefined && v !== null && v !== "",
+      ),
+    );
+    onSend(
+      `Run the block with these inputs: ${JSON.stringify(nonEmpty, null, 2)}`,
+    );
+    setShowInputForm(false);
+    setInputValues({});
+  }
+
+  return (
+    <div className="grid gap-2">
+      <ContentMessage>{output.message}</ContentMessage>
+
+      {credentialFields.length > 0 && (
+        <div className="rounded-2xl border bg-background p-3">
+          <CredentialsGroupedView
+            credentialFields={credentialFields}
+            requiredCredentials={requiredCredentials}
+            inputCredentials={inputCredentials}
+            inputValues={{}}
+            onCredentialChange={handleCredentialChange}
+          />
+          {isAllCredentialsComplete && !hasSentCredentials && (
+            <Button
+              variant="primary"
+              size="small"
+              className="mt-3 w-full"
+              onClick={handleProceedCredentials}
+            >
+              Proceed
+            </Button>
+          )}
+        </div>
+      )}
+
+      {inputSchema && (
+        <div className="flex gap-2 pt-2">
+          <Button
+            variant="outline"
+            size="small"
+            className="w-fit"
+            onClick={() => setShowInputForm((prev) => !prev)}
+          >
+            {showInputForm ? "Hide inputs" : "Fill in inputs"}
+          </Button>
+        </div>
+      )}
+
+      <AnimatePresence initial={false}>
+        {showInputForm && inputSchema && (
+          <motion.div
+            initial={{ height: 0, opacity: 0, filter: "blur(6px)" }}
+            animate={{ height: "auto", opacity: 1, filter: "blur(0px)" }}
+            exit={{ height: 0, opacity: 0, filter: "blur(6px)" }}
+            transition={{
+              height: { type: "spring", bounce: 0.15, duration: 0.5 },
+              opacity: { duration: 0.25 },
+              filter: { duration: 0.2 },
+            }}
+            className="overflow-hidden"
+            style={{ willChange: "height, opacity, filter" }}
+          >
+            <div className="rounded-2xl border bg-background p-3 pt-4">
+              <Text variant="body-medium">Block inputs</Text>
+              <FormRenderer
+                jsonSchema={inputSchema}
+                handleChange={(v) => setInputValues(v.formData ?? {})}
+                uiSchema={{
+                  "ui:submitButtonOptions": { norender: true },
+                }}
+                initialValues={inputValues}
+                formContext={{
+                  showHandles: false,
+                  size: "small",
+                }}
+              />
+              <div className="-mt-8 flex gap-2">
+                <Button
+                  variant="primary"
+                  size="small"
+                  className="w-fit"
+                  onClick={handleRunWithInputs}
+                >
+                  Run
+                </Button>
+                <Button
+                  variant="secondary"
+                  size="small"
+                  className="w-fit"
+                  onClick={() => {
+                    setShowInputForm(false);
+                    setInputValues({});
+                  }}
+                >
+                  Cancel
+                </Button>
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {expectedInputs.length > 0 && !inputSchema && (
+        <div className="rounded-2xl border bg-background p-3">
+          <ContentCardTitle className="text-xs">
+            Expected inputs
+          </ContentCardTitle>
+          <div className="mt-2 grid gap-2">
+            {expectedInputs.map((input) => (
+              <div key={input.name} className="rounded-xl border p-2">
+                <div className="flex items-center justify-between gap-2">
+                  <ContentCardTitle className="text-xs">
+                    {input.title}
+                  </ContentCardTitle>
+                  <ContentBadge>
+                    {input.required ? "Required" : "Optional"}
+                  </ContentBadge>
+                </div>
+                <ContentCardDescription className="mt-1">
+                  {input.name} &bull; {input.type}
+                  {input.description ? ` \u2022 ${input.description}` : ""}
+                </ContentCardDescription>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/components/SetupRequirementsCard/helpers.ts

@@ -0,0 +1,156 @@
+import type { CredentialField } from "@/components/contextual/CredentialsInput/components/CredentialsGroupedView/helpers";
+import type { RJSFSchema } from "@rjsf/utils";
+
+const VALID_CREDENTIAL_TYPES = new Set([
+  "api_key",
+  "oauth2",
+  "user_password",
+  "host_scoped",
+]);
+
+export function coerceCredentialFields(rawMissingCredentials: unknown): {
+  credentialFields: CredentialField[];
+  requiredCredentials: Set<string>;
+} {
+  const missing =
+    rawMissingCredentials && typeof rawMissingCredentials === "object"
+      ? (rawMissingCredentials as Record<string, unknown>)
+      : {};
+
+  const credentialFields: CredentialField[] = [];
+  const requiredCredentials = new Set<string>();
+
+  Object.entries(missing).forEach(([key, value]) => {
+    if (!value || typeof value !== "object") return;
+    const cred = value as Record<string, unknown>;
+
+    const provider =
+      typeof cred.provider === "string" ? cred.provider.trim() : "";
+    if (!provider) return;
+
+    const types =
+      Array.isArray(cred.types) && cred.types.length > 0
+        ? cred.types
+        : typeof cred.type === "string"
+          ? [cred.type]
+          : [];
+
+    const credentialTypes = types
+      .map((t) => (typeof t === "string" ? t.trim() : ""))
+      .filter((t) => VALID_CREDENTIAL_TYPES.has(t));
+
+    if (credentialTypes.length === 0) return;
+
+    const scopes = Array.isArray(cred.scopes)
+      ? cred.scopes.filter((s): s is string => typeof s === "string")
+      : undefined;
+
+    const schema = {
+      type: "object" as const,
+      properties: {},
+      credentials_provider: [provider],
+      credentials_types: credentialTypes,
+      credentials_scopes: scopes,
+    };
+
+    credentialFields.push([key, schema]);
+    requiredCredentials.add(key);
+  });
+
+  return { credentialFields, requiredCredentials };
+}
+
+export function coerceExpectedInputs(rawInputs: unknown): Array<{
+  name: string;
+  title: string;
+  type: string;
+  description?: string;
+  required: boolean;
+}> {
+  if (!Array.isArray(rawInputs)) return [];
+  const results: Array<{
+    name: string;
+    title: string;
+    type: string;
+    description?: string;
+    required: boolean;
+  }> = [];
+
+  rawInputs.forEach((value, index) => {
+    if (!value || typeof value !== "object") return;
+    const input = value as Record<string, unknown>;
+
+    const name =
+      typeof input.name === "string" && input.name.trim()
+        ? input.name.trim()
+        : `input-${index}`;
+    const title =
+      typeof input.title === "string" && input.title.trim()
+        ? input.title.trim()
+        : name;
+    const type = typeof input.type === "string" ? input.type : "unknown";
+    const description =
+      typeof input.description === "string" && input.description.trim()
+        ? input.description.trim()
+        : undefined;
+    const required = Boolean(input.required);
+
+    const item: {
+      name: string;
+      title: string;
+      type: string;
+      description?: string;
+      required: boolean;
+    } = { name, title, type, required };
+    if (description) item.description = description;
+    results.push(item);
+  });
+
+  return results;
+}
+
+/**
+ * Build an RJSF schema from expected inputs so they can be rendered
+ * as a dynamic form via FormRenderer.
+ */
+export function buildExpectedInputsSchema(
+  expectedInputs: Array<{
+    name: string;
+    title: string;
+    type: string;
+    description?: string;
+    required: boolean;
+  }>,
+): RJSFSchema | null {
+  if (expectedInputs.length === 0) return null;
+
+  const TYPE_MAP: Record<string, string> = {
+    string: "string",
+    str: "string",
+    text: "string",
+    number: "number",
+    int: "integer",
+    integer: "integer",
+    float: "number",
+    boolean: "boolean",
+    bool: "boolean",
+  };
+
+  const properties: Record<string, Record<string, unknown>> = {};
+  const required: string[] = [];
+
+  for (const input of expectedInputs) {
+    properties[input.name] = {
+      type: TYPE_MAP[input.type.toLowerCase()] ?? "string",
+      title: input.title,
+      ...(input.description ? { description: input.description } : {}),
+    };
+    if (input.required) required.push(input.name);
+  }
+
+  return {
+    type: "object",
+    properties,
+    ...(required.length > 0 ? { required } : {}),
+  };
+}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/helpers.tsx

@@ -0,0 +1,185 @@
+import type { BlockOutputResponse } from "@/app/api/__generated__/models/blockOutputResponse";
+import type { ErrorResponse } from "@/app/api/__generated__/models/errorResponse";
+import { ResponseType } from "@/app/api/__generated__/models/responseType";
+import type { SetupRequirementsResponse } from "@/app/api/__generated__/models/setupRequirementsResponse";
+import {
+  PlayCircleIcon,
+  PlayIcon,
+  WarningDiamondIcon,
+} from "@phosphor-icons/react";
+import type { ToolUIPart } from "ai";
+import { SpinnerLoader } from "../../components/SpinnerLoader/SpinnerLoader";
+
+export interface RunBlockInput {
+  block_id?: string;
+  input_data?: Record<string, unknown>;
+}
+
+export type RunBlockToolOutput =
+  | SetupRequirementsResponse
+  | BlockOutputResponse
+  | ErrorResponse;
+
+const RUN_BLOCK_OUTPUT_TYPES = new Set<string>([
+  ResponseType.setup_requirements,
+  ResponseType.block_output,
+  ResponseType.error,
+]);
+
+export function isRunBlockSetupRequirementsOutput(
+  output: RunBlockToolOutput,
+): output is SetupRequirementsResponse {
+  return (
+    output.type === ResponseType.setup_requirements ||
+    ("setup_info" in output && typeof output.setup_info === "object")
+  );
+}
+
+export function isRunBlockBlockOutput(
+  output: RunBlockToolOutput,
+): output is BlockOutputResponse {
+  return output.type === ResponseType.block_output || "block_id" in output;
+}
+
+export function isRunBlockErrorOutput(
+  output: RunBlockToolOutput,
+): output is ErrorResponse {
+  return output.type === ResponseType.error || "error" in output;
+}
+
+function parseOutput(output: unknown): RunBlockToolOutput | null {
+  if (!output) return null;
+  if (typeof output === "string") {
+    const trimmed = output.trim();
+    if (!trimmed) return null;
+    try {
+      return parseOutput(JSON.parse(trimmed) as unknown);
+    } catch {
+      return null;
+    }
+  }
+  if (typeof output === "object") {
+    const type = (output as { type?: unknown }).type;
+    if (typeof type === "string" && RUN_BLOCK_OUTPUT_TYPES.has(type)) {
+      return output as RunBlockToolOutput;
+    }
+    if ("block_id" in output) return output as BlockOutputResponse;
+    if ("setup_info" in output) return output as SetupRequirementsResponse;
+    if ("error" in output || "details" in output)
+      return output as ErrorResponse;
+  }
+  return null;
+}
+
+export function getRunBlockToolOutput(
+  part: unknown,
+): RunBlockToolOutput | null {
+  if (!part || typeof part !== "object") return null;
+  return parseOutput((part as { output?: unknown }).output);
+}
+
+export function getAnimationText(part: {
+  state: ToolUIPart["state"];
+  input?: unknown;
+  output?: unknown;
+}): string {
+  const input = part.input as RunBlockInput | undefined;
+  const blockId = input?.block_id?.trim();
+  const blockText = blockId ? ` "${blockId}"` : "";
+
+  switch (part.state) {
+    case "input-streaming":
+    case "input-available":
+      return `Running the block${blockText}`;
+    case "output-available": {
+      const output = parseOutput(part.output);
+      if (!output) return `Running the block${blockText}`;
+      if (isRunBlockBlockOutput(output)) return `Ran "${output.block_name}"`;
+      if (isRunBlockSetupRequirementsOutput(output)) {
+        return `Setup needed for "${output.setup_info.agent_name}"`;
+      }
+      return "Error running block";
+    }
+    case "output-error":
+      return "Error running block";
+    default:
+      return "Running the block";
+  }
+}
+
+export function ToolIcon({
+  isStreaming,
+  isError,
+}: {
+  isStreaming?: boolean;
+  isError?: boolean;
+}) {
+  if (isError) {
+    return (
+      <WarningDiamondIcon size={14} weight="regular" className="text-red-500" />
+    );
+  }
+  if (isStreaming) {
+    return <SpinnerLoader size={40} className="text-neutral-700" />;
+  }
+  return <PlayIcon size={14} weight="regular" className="text-neutral-400" />;
+}
+
+export function AccordionIcon() {
+  return <PlayCircleIcon size={32} weight="light" />;
+}
+
+export function formatMaybeJson(value: unknown): string {
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+
+export function getAccordionMeta(output: RunBlockToolOutput): {
+  icon: React.ReactNode;
+  title: string;
+  titleClassName?: string;
+  description?: string;
+} {
+  const icon = <AccordionIcon />;
+
+  if (isRunBlockBlockOutput(output)) {
+    const keys = Object.keys(output.outputs ?? {});
+    return {
+      icon: <SpinnerLoader size={32} className="text-neutral-700" />,
+      title: output.block_name,
+      description:
+        keys.length > 0
+          ? `${keys.length} output key${keys.length === 1 ? "" : "s"}`
+          : output.message,
+    };
+  }
+
+  if (isRunBlockSetupRequirementsOutput(output)) {
+    const missingCredsCount = Object.keys(
+      (output.setup_info.user_readiness?.missing_credentials ?? {}) as Record<
+        string,
+        unknown
+      >,
+    ).length;
+    return {
+      icon,
+      title: output.setup_info.agent_name,
+      description:
+        missingCredsCount > 0
+          ? `Missing ${missingCredsCount} credential${missingCredsCount === 1 ? "" : "s"}`
+          : output.message,
+    };
+  }
+
+  return {
+    icon: (
+      <WarningDiamondIcon size={32} weight="light" className="text-red-500" />
+    ),
+    title: "Error",
+    titleClassName: "text-red-500",
+  };
+}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/SearchDocs/SearchDocs.tsx

@@ -0,0 +1,186 @@
+"use client";
+
+import type { ToolUIPart } from "ai";
+import { useMemo } from "react";
+
+import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
+import {
+  ContentCard,
+  ContentCardDescription,
+  ContentCardHeader,
+  ContentCardSubtitle,
+  ContentCardTitle,
+  ContentGrid,
+  ContentLink,
+  ContentMessage,
+  ContentSuggestionsList,
+} from "../../components/ToolAccordion/AccordionContent";
+import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
+import {
+  AccordionIcon,
+  getAnimationText,
+  getDocsToolOutput,
+  getDocsToolTitle,
+  getToolLabel,
+  isDocPageOutput,
+  isDocSearchResultsOutput,
+  isErrorOutput,
+  isNoResultsOutput,
+  toDocsUrl,
+  ToolIcon,
+  type DocsToolType,
+} from "./helpers";
+
+export interface DocsToolPart {
+  type: DocsToolType;
+  toolCallId: string;
+  state: ToolUIPart["state"];
+  input?: unknown;
+  output?: unknown;
+}
+
+interface Props {
+  part: DocsToolPart;
+}
+
+function truncate(text: string, maxChars: number): string {
+  const trimmed = text.trim();
+  if (trimmed.length <= maxChars) return trimmed;
+  return `${trimmed.slice(0, maxChars).trimEnd()}…`;
+}
+
+export function SearchDocsTool({ part }: Props) {
+  const output = getDocsToolOutput(part);
+  const text = getAnimationText(part);
+  const isStreaming =
+    part.state === "input-streaming" || part.state === "input-available";
+  const isError =
+    part.state === "output-error" || (!!output && isErrorOutput(output));
+
+  const normalized = useMemo(() => {
+    if (!output) return null;
+    const title = getDocsToolTitle(part.type, output);
+    const label = getToolLabel(part.type);
+    return { title, label };
+  }, [output, part.type]);
+
+  const isOutputAvailable = part.state === "output-available" && !!output;
+
+  const docSearchOutput =
+    isOutputAvailable && output && isDocSearchResultsOutput(output)
+      ? output
+      : null;
+  const docPageOutput =
+    isOutputAvailable && output && isDocPageOutput(output) ? output : null;
+  const noResultsOutput =
+    isOutputAvailable && output && isNoResultsOutput(output) ? output : null;
+  const errorOutput =
+    isOutputAvailable && output && isErrorOutput(output) ? output : null;
+
+  const hasExpandableContent =
+    isOutputAvailable &&
+    ((!!docSearchOutput && docSearchOutput.count > 0) ||
+      !!docPageOutput ||
+      !!noResultsOutput ||
+      !!errorOutput);
+
+  const accordionDescription =
+    hasExpandableContent && docSearchOutput
+      ? `Found ${docSearchOutput.count} result${docSearchOutput.count === 1 ? "" : "s"} for "${docSearchOutput.query}"`
+      : hasExpandableContent && docPageOutput
+        ? docPageOutput.path
+        : hasExpandableContent && (noResultsOutput || errorOutput)
+          ? ((noResultsOutput ?? errorOutput)?.message ?? null)
+          : null;
+
+  return (
+    <div className="py-2">
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <ToolIcon
+          toolType={part.type}
+          isStreaming={isStreaming}
+          isError={isError}
+        />
+        <MorphingTextAnimation
+          text={text}
+          className={isError ? "text-red-500" : undefined}
+        />
+      </div>
+
+      {hasExpandableContent && normalized && (
+        <ToolAccordion
+          icon={<AccordionIcon toolType={part.type} />}
+          title={normalized.title}
+          description={accordionDescription}
+        >
+          {docSearchOutput && (
+            <ContentGrid>
+              {docSearchOutput.results.map((r) => {
+                const href = r.doc_url ?? toDocsUrl(r.path);
+                return (
+                  <ContentCard key={r.path}>
+                    <ContentCardHeader
+                      action={<ContentLink href={href}>Open</ContentLink>}
+                    >
+                      <ContentCardTitle>{r.title}</ContentCardTitle>
+                      <ContentCardSubtitle>
+                        {r.path}
+                        {r.section ? ` • ${r.section}` : ""}
+                      </ContentCardSubtitle>
+                      <ContentCardDescription>
+                        {truncate(r.snippet, 240)}
+                      </ContentCardDescription>
+                    </ContentCardHeader>
+                  </ContentCard>
+                );
+              })}
+            </ContentGrid>
+          )}
+
+          {docPageOutput && (
+            <div>
+              <ContentCardHeader
+                action={
+                  <ContentLink
+                    href={
+                      docPageOutput.doc_url ?? toDocsUrl(docPageOutput.path)
+                    }
+                  >
+                    Open
+                  </ContentLink>
+                }
+              >
+                <ContentCardTitle>{docPageOutput.title}</ContentCardTitle>
+                <ContentCardSubtitle>{docPageOutput.path}</ContentCardSubtitle>
+              </ContentCardHeader>
+              <ContentCardDescription className="whitespace-pre-wrap">
+                {truncate(docPageOutput.content, 800)}
+              </ContentCardDescription>
+            </div>
+          )}
+
+          {noResultsOutput && (
+            <div>
+              <ContentMessage>{noResultsOutput.message}</ContentMessage>
+              {noResultsOutput.suggestions &&
+                noResultsOutput.suggestions.length > 0 && (
+                  <ContentSuggestionsList items={noResultsOutput.suggestions} />
+                )}
+            </div>
+          )}
+
+          {errorOutput && (
+            <div>
+              <ContentMessage>{errorOutput.message}</ContentMessage>
+              {errorOutput.error && (
+                <ContentCardDescription>
+                  {errorOutput.error}
+                </ContentCardDescription>
+              )}
+            </div>
+          )}
+        </ToolAccordion>
+      )}
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/SearchDocs/helpers.tsx

@@ -0,0 +1,215 @@
+import type { DocPageResponse } from "@/app/api/__generated__/models/docPageResponse";
+import type { DocSearchResultsResponse } from "@/app/api/__generated__/models/docSearchResultsResponse";
+import type { ErrorResponse } from "@/app/api/__generated__/models/errorResponse";
+import type { NoResultsResponse } from "@/app/api/__generated__/models/noResultsResponse";
+import { ResponseType } from "@/app/api/__generated__/models/responseType";
+import {
+  ArticleIcon,
+  FileMagnifyingGlassIcon,
+  FileTextIcon,
+} from "@phosphor-icons/react";
+import { ToolUIPart } from "ai";
+
+export interface SearchDocsInput {
+  query: string;
+}
+
+export interface GetDocPageInput {
+  path: string;
+}
+
+export type DocsToolOutput =
+  | DocSearchResultsResponse
+  | DocPageResponse
+  | NoResultsResponse
+  | ErrorResponse;
+
+export type DocsToolType = "tool-search_docs" | "tool-get_doc_page" | string;
+
+export function getToolLabel(toolType: DocsToolType): string {
+  switch (toolType) {
+    case "tool-search_docs":
+      return "Docs";
+    case "tool-get_doc_page":
+      return "Docs page";
+    default:
+      return "Docs";
+  }
+}
+
+function parseOutput(output: unknown): DocsToolOutput | null {
+  if (!output) return null;
+  if (typeof output === "string") {
+    const trimmed = output.trim();
+    if (!trimmed) return null;
+    try {
+      return parseOutput(JSON.parse(trimmed) as unknown);
+    } catch {
+      return null;
+    }
+  }
+  if (typeof output === "object") {
+    const type = (output as { type?: unknown }).type;
+    if (
+      type === ResponseType.doc_search_results ||
+      type === ResponseType.doc_page ||
+      type === ResponseType.no_results ||
+      type === ResponseType.error
+    ) {
+      return output as DocsToolOutput;
+    }
+    if ("results" in output && "query" in output)
+      return output as DocSearchResultsResponse;
+    if ("content" in output && "path" in output)
+      return output as DocPageResponse;
+    if ("suggestions" in output && !("error" in output))
+      return output as NoResultsResponse;
+    if ("error" in output || "details" in output)
+      return output as ErrorResponse;
+  }
+  return null;
+}
+
+export function getDocsToolOutput(part: unknown): DocsToolOutput | null {
+  if (!part || typeof part !== "object") return null;
+  return parseOutput((part as { output?: unknown }).output);
+}
+
+export function isDocSearchResultsOutput(
+  output: DocsToolOutput,
+): output is DocSearchResultsResponse {
+  return output.type === ResponseType.doc_search_results || "results" in output;
+}
+
+export function isDocPageOutput(
+  output: DocsToolOutput,
+): output is DocPageResponse {
+  return output.type === ResponseType.doc_page || "content" in output;
+}
+
+export function isNoResultsOutput(
+  output: DocsToolOutput,
+): output is NoResultsResponse {
+  return (
+    output.type === ResponseType.no_results ||
+    ("suggestions" in output && !("error" in output))
+  );
+}
+
+export function isErrorOutput(output: DocsToolOutput): output is ErrorResponse {
+  return output.type === ResponseType.error || "error" in output;
+}
+
+export function getDocsToolTitle(
+  toolType: DocsToolType,
+  output: DocsToolOutput,
+): string {
+  if (toolType === "tool-search_docs") {
+    if (isDocSearchResultsOutput(output)) return "Documentation results";
+    if (isNoResultsOutput(output)) return "No documentation found";
+    return "Documentation search error";
+  }
+
+  if (isDocPageOutput(output)) return "Documentation page";
+  if (isNoResultsOutput(output)) return "No documentation found";
+  return "Documentation page error";
+}
+
+export function getAnimationText(part: {
+  type: DocsToolType;
+  state: ToolUIPart["state"];
+  input?: unknown;
+  output?: unknown;
+}): string {
+  switch (part.type) {
+    case "tool-search_docs": {
+      const query = (part.input as SearchDocsInput | undefined)?.query?.trim();
+      const queryText = query ? ` for "${query}"` : "";
+
+      switch (part.state) {
+        case "input-streaming":
+        case "input-available":
+          return `Searching documentation${queryText}`;
+        case "output-available": {
+          const output = parseOutput(part.output);
+          if (!output) return `Searching documentation${queryText}`;
+          if (isDocSearchResultsOutput(output)) {
+            const count = output.count ?? output.results.length;
+            return `Found ${count} result${count === 1 ? "" : "s"}${queryText}`;
+          }
+          if (isNoResultsOutput(output)) {
+            return `No results found${queryText}`;
+          }
+          return `Error searching documentation${queryText}`;
+        }
+        case "output-error":
+          return `Error searching documentation${queryText}`;
+        default:
+          return "Searching documentation";
+      }
+    }
+    case "tool-get_doc_page": {
+      const path = (part.input as GetDocPageInput | undefined)?.path?.trim();
+      const pathText = path ? ` "${path}"` : "";
+
+      switch (part.state) {
+        case "input-streaming":
+        case "input-available":
+          return `Loading documentation page${pathText}`;
+        case "output-available": {
+          const output = parseOutput(part.output);
+          if (!output) return `Loading documentation page${pathText}`;
+          if (isDocPageOutput(output)) return `Loaded "${output.title}"`;
+          if (isNoResultsOutput(output)) return "Documentation page not found";
+          return "Error loading documentation page";
+        }
+        case "output-error":
+          return "Error loading documentation page";
+        default:
+          return "Loading documentation page";
+      }
+    }
+  }
+
+  return "Processing";
+}
+
+export function ToolIcon({
+  toolType,
+  isStreaming,
+  isError,
+}: {
+  toolType: DocsToolType;
+  isStreaming?: boolean;
+  isError?: boolean;
+}) {
+  const IconComponent =
+    toolType === "tool-get_doc_page" ? FileTextIcon : FileMagnifyingGlassIcon;
+
+  return (
+    <IconComponent
+      size={14}
+      weight="regular"
+      className={
+        isError
+          ? "text-red-500"
+          : isStreaming
+            ? "text-neutral-500"
+            : "text-neutral-400"
+      }
+    />
+  );
+}
+
+export function AccordionIcon({ toolType }: { toolType: DocsToolType }) {
+  const IconComponent =
+    toolType === "tool-get_doc_page" ? ArticleIcon : FileTextIcon;
+  return <IconComponent size={32} weight="light" />;
+}
+
+export function toDocsUrl(path: string): string {
+  const urlPath = path.includes(".")
+    ? path.slice(0, path.lastIndexOf("."))
+    : path;
+  return `https://docs.agpt.co/${urlPath}`;
+}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/ViewAgentOutput/ViewAgentOutput.tsx

@@ -0,0 +1,261 @@
+"use client";
+
+import type { ToolUIPart } from "ai";
+import React from "react";
+import { getGetWorkspaceDownloadFileByIdUrl } from "@/app/api/__generated__/endpoints/workspace/workspace";
+import {
+  globalRegistry,
+  OutputItem,
+} from "@/components/contextual/OutputRenderers";
+import type { OutputMetadata } from "@/components/contextual/OutputRenderers";
+import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
+import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
+import {
+  ContentBadge,
+  ContentCard,
+  ContentCardHeader,
+  ContentCardSubtitle,
+  ContentCardTitle,
+  ContentCodeBlock,
+  ContentGrid,
+  ContentLink,
+  ContentMessage,
+  ContentSuggestionsList,
+} from "../../components/ToolAccordion/AccordionContent";
+import {
+  formatMaybeJson,
+  getAnimationText,
+  getViewAgentOutputToolOutput,
+  isAgentOutputResponse,
+  isErrorResponse,
+  isNoResultsResponse,
+  AccordionIcon,
+  ToolIcon,
+  type ViewAgentOutputToolOutput,
+} from "./helpers";
+
+export interface ViewAgentOutputToolPart {
+  type: string;
+  toolCallId: string;
+  state: ToolUIPart["state"];
+  input?: unknown;
+  output?: unknown;
+}
+
+interface Props {
+  part: ViewAgentOutputToolPart;
+}
+
+function isWorkspaceRef(value: unknown): value is string {
+  return typeof value === "string" && value.startsWith("workspace://");
+}
+
+function resolveForRenderer(value: unknown): {
+  value: unknown;
+  metadata?: OutputMetadata;
+} {
+  if (!isWorkspaceRef(value)) return { value };
+
+  const withoutPrefix = value.replace("workspace://", "");
+  const fileId = withoutPrefix.split("#")[0];
+  const apiPath = getGetWorkspaceDownloadFileByIdUrl(fileId);
+  const url = `/api/proxy${apiPath}`;
+
+  const hashIndex = value.indexOf("#");
+  const mimeHint =
+    hashIndex !== -1 ? value.slice(hashIndex + 1) || undefined : undefined;
+
+  const metadata: OutputMetadata = {};
+  if (mimeHint) {
+    metadata.mimeType = mimeHint;
+    if (mimeHint.startsWith("image/")) metadata.type = "image";
+    else if (mimeHint.startsWith("video/")) metadata.type = "video";
+  }
+
+  return { value: url, metadata };
+}
+
+function RenderOutputValue({ value }: { value: unknown }) {
+  const resolved = resolveForRenderer(value);
+  const renderer = globalRegistry.getRenderer(
+    resolved.value,
+    resolved.metadata,
+  );
+
+  if (renderer) {
+    return (
+      <OutputItem
+        value={resolved.value}
+        metadata={resolved.metadata}
+        renderer={renderer}
+      />
+    );
+  }
+
+  // Fallback for audio workspace refs
+  if (
+    isWorkspaceRef(value) &&
+    resolved.metadata?.mimeType?.startsWith("audio/")
+  ) {
+    return (
+      <audio controls src={String(resolved.value)} className="mt-2 w-full" />
+    );
+  }
+
+  return null;
+}
+
+function getAccordionMeta(output: ViewAgentOutputToolOutput): {
+  icon: React.ReactNode;
+  title: string;
+  description?: string;
+} {
+  const icon = <AccordionIcon />;
+
+  if (isAgentOutputResponse(output)) {
+    const status = output.execution?.status;
+    return {
+      icon,
+      title: output.agent_name,
+      description: status ? `Status: ${status}` : output.message,
+    };
+  }
+  if (isNoResultsResponse(output)) {
+    return { icon, title: "No results" };
+  }
+  return { icon, title: "Error" };
+}
+
+export function ViewAgentOutputTool({ part }: Props) {
+  const text = getAnimationText(part);
+  const isStreaming =
+    part.state === "input-streaming" || part.state === "input-available";
+
+  const output = getViewAgentOutputToolOutput(part);
+  const isError =
+    part.state === "output-error" || (!!output && isErrorResponse(output));
+  const hasExpandableContent =
+    part.state === "output-available" &&
+    !!output &&
+    (isAgentOutputResponse(output) ||
+      isNoResultsResponse(output) ||
+      isErrorResponse(output));
+
+  return (
+    <div className="py-2">
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <ToolIcon isStreaming={isStreaming} isError={isError} />
+        <MorphingTextAnimation
+          text={text}
+          className={isError ? "text-red-500" : undefined}
+        />
+      </div>
+
+      {hasExpandableContent && output && (
+        <ToolAccordion {...getAccordionMeta(output)}>
+          {isAgentOutputResponse(output) && (
+            <ContentGrid>
+              <ContentCardHeader
+                className="gap-3"
+                action={
+                  output.library_agent_link ? (
+                    <ContentLink href={output.library_agent_link}>
+                      Open
+                    </ContentLink>
+                  ) : null
+                }
+              >
+                <ContentMessage>{output.message}</ContentMessage>
+              </ContentCardHeader>
+
+              {output.execution ? (
+                <ContentGrid>
+                  <ContentCard>
+                    <ContentCardTitle className="text-xs">
+                      Execution
+                    </ContentCardTitle>
+                    <ContentCardSubtitle className="mt-1">
+                      {output.execution.execution_id}
+                    </ContentCardSubtitle>
+                    <ContentCardSubtitle className="mt-1">
+                      Status: {output.execution.status}
+                    </ContentCardSubtitle>
+                  </ContentCard>
+
+                  {output.execution.inputs_summary && (
+                    <ContentCard>
+                      <ContentCardTitle className="text-xs">
+                        Inputs summary
+                      </ContentCardTitle>
+                      <div className="mt-2">
+                        <RenderOutputValue
+                          value={output.execution.inputs_summary}
+                        />
+                      </div>
+                    </ContentCard>
+                  )}
+
+                  {Object.entries(output.execution.outputs ?? {}).map(
+                    ([key, items]) => (
+                      <ContentCard key={key}>
+                        <div className="flex items-center justify-between gap-2">
+                          <ContentCardTitle className="text-xs">
+                            {key}
+                          </ContentCardTitle>
+                          <ContentBadge>
+                            {items.length} item
+                            {items.length === 1 ? "" : "s"}
+                          </ContentBadge>
+                        </div>
+                        <div className="mt-2">
+                          {items.slice(0, 3).map((item, i) => (
+                            <RenderOutputValue key={i} value={item} />
+                          ))}
+                        </div>
+                      </ContentCard>
+                    ),
+                  )}
+                </ContentGrid>
+              ) : (
+                <ContentCard>
+                  <ContentMessage>No execution selected.</ContentMessage>
+                  <ContentCardSubtitle className="mt-1">
+                    Try asking for a specific run or execution_id.
+                  </ContentCardSubtitle>
+                </ContentCard>
+              )}
+            </ContentGrid>
+          )}
+
+          {isNoResultsResponse(output) && (
+            <ContentGrid>
+              <ContentMessage>{output.message}</ContentMessage>
+              {output.suggestions && output.suggestions.length > 0 && (
+                <ContentSuggestionsList
+                  items={output.suggestions}
+                  className="mt-1"
+                />
+              )}
+            </ContentGrid>
+          )}
+
+          {isErrorResponse(output) && (
+            <ContentGrid>
+              <ContentMessage>{output.message}</ContentMessage>
+              {output.error && (
+                <ContentCodeBlock>
+                  {formatMaybeJson(output.error)}
+                </ContentCodeBlock>
+              )}
+              {output.details && (
+                <ContentCodeBlock>
+                  {formatMaybeJson(output.details)}
+                </ContentCodeBlock>
+              )}
+            </ContentGrid>
+          )}
+        </ToolAccordion>
+      )}
+    </div>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/ViewAgentOutput/helpers.tsx

@@ -0,0 +1,158 @@
+import type { AgentOutputResponse } from "@/app/api/__generated__/models/agentOutputResponse";
+import type { ErrorResponse } from "@/app/api/__generated__/models/errorResponse";
+import type { NoResultsResponse } from "@/app/api/__generated__/models/noResultsResponse";
+import { ResponseType } from "@/app/api/__generated__/models/responseType";
+import { EyeIcon, MonitorIcon } from "@phosphor-icons/react";
+import type { ToolUIPart } from "ai";
+
+export interface ViewAgentOutputInput {
+  agent_name?: string;
+  library_agent_id?: string;
+  store_slug?: string;
+  execution_id?: string;
+  run_time?: string;
+}
+
+export type ViewAgentOutputToolOutput =
+  | AgentOutputResponse
+  | NoResultsResponse
+  | ErrorResponse;
+
+function parseOutput(output: unknown): ViewAgentOutputToolOutput | null {
+  if (!output) return null;
+  if (typeof output === "string") {
+    const trimmed = output.trim();
+    if (!trimmed) return null;
+    try {
+      return parseOutput(JSON.parse(trimmed) as unknown);
+    } catch {
+      return null;
+    }
+  }
+  if (typeof output === "object") {
+    const type = (output as { type?: unknown }).type;
+    if (
+      type === ResponseType.agent_output ||
+      type === ResponseType.no_results ||
+      type === ResponseType.error
+    ) {
+      return output as ViewAgentOutputToolOutput;
+    }
+    if ("agent_id" in output && "agent_name" in output) {
+      return output as AgentOutputResponse;
+    }
+    if ("suggestions" in output && !("error" in output)) {
+      return output as NoResultsResponse;
+    }
+    if ("error" in output || "details" in output)
+      return output as ErrorResponse;
+  }
+  return null;
+}
+
+export function isAgentOutputResponse(
+  output: ViewAgentOutputToolOutput,
+): output is AgentOutputResponse {
+  return output.type === ResponseType.agent_output || "agent_id" in output;
+}
+
+export function isNoResultsResponse(
+  output: ViewAgentOutputToolOutput,
+): output is NoResultsResponse {
+  return (
+    output.type === ResponseType.no_results ||
+    ("suggestions" in output && !("error" in output))
+  );
+}
+
+export function isErrorResponse(
+  output: ViewAgentOutputToolOutput,
+): output is ErrorResponse {
+  return output.type === ResponseType.error || "error" in output;
+}
+
+export function getViewAgentOutputToolOutput(
+  part: unknown,
+): ViewAgentOutputToolOutput | null {
+  if (!part || typeof part !== "object") return null;
+  return parseOutput((part as { output?: unknown }).output);
+}
+
+function getAgentIdentifierText(
+  input: ViewAgentOutputInput | undefined,
+): string | null {
+  if (!input) return null;
+  const libraryId = input.library_agent_id?.trim();
+  if (libraryId) return `Library agent ${libraryId}`;
+  const slug = input.store_slug?.trim();
+  if (slug) return slug;
+  const name = input.agent_name?.trim();
+  if (name) return name;
+  return null;
+}
+
+export function getAnimationText(part: {
+  state: ToolUIPart["state"];
+  input?: unknown;
+  output?: unknown;
+}): string {
+  const input = part.input as ViewAgentOutputInput | undefined;
+  const agent = getAgentIdentifierText(input);
+  const agentText = agent ? ` "${agent}"` : "";
+
+  switch (part.state) {
+    case "input-streaming":
+    case "input-available":
+      return `Retrieving agent output${agentText}`;
+    case "output-available": {
+      const output = parseOutput(part.output);
+      if (!output) return `Retrieving agent output${agentText}`;
+      if (isAgentOutputResponse(output)) {
+        if (output.execution)
+          return `Retrieved output (${output.execution.status})`;
+        return "Retrieved agent output";
+      }
+      if (isNoResultsResponse(output)) return "No outputs found";
+      return "Error loading agent output";
+    }
+    case "output-error":
+      return "Error loading agent output";
+    default:
+      return "Retrieving agent output";
+  }
+}
+
+export function ToolIcon({
+  isStreaming,
+  isError,
+}: {
+  isStreaming?: boolean;
+  isError?: boolean;
+}) {
+  return (
+    <EyeIcon
+      size={14}
+      weight="regular"
+      className={
+        isError
+          ? "text-red-500"
+          : isStreaming
+            ? "text-neutral-500"
+            : "text-neutral-400"
+      }
+    />
+  );
+}
+
+export function AccordionIcon() {
+  return <MonitorIcon size={32} weight="light" />;
+}
+
+export function formatMaybeJson(value: unknown): string {
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}

autogpt_platform/frontend/src/app/(platform)/copilot/useChatSession.ts

@@ -0,0 +1,109 @@
+import {
+  getGetV2GetSessionQueryKey,
+  getGetV2ListSessionsQueryKey,
+  useGetV2GetSession,
+  usePostV2CreateSession,
+} from "@/app/api/__generated__/endpoints/chat/chat";
+import { toast } from "@/components/molecules/Toast/use-toast";
+import * as Sentry from "@sentry/nextjs";
+import { useQueryClient } from "@tanstack/react-query";
+import { parseAsString, useQueryState } from "nuqs";
+import { useEffect, useMemo, useRef } from "react";
+import { convertChatSessionMessagesToUiMessages } from "./helpers/convertChatSessionToUiMessages";
+
+export function useChatSession() {
+  const [sessionId, setSessionId] = useQueryState("sessionId", parseAsString);
+  const queryClient = useQueryClient();
+
+  const sessionQuery = useGetV2GetSession(sessionId ?? "", {
+    query: {
+      enabled: !!sessionId,
+      staleTime: Infinity,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+    },
+  });
+
+  // When the user navigates away from a session, invalidate its query cache.
+  // useChat destroys its Chat instance on id change, so messages are lost.
+  // Invalidating ensures the next visit fetches fresh data from the API
+  // instead of hydrating from stale cache that's missing recent messages.
+  const prevSessionIdRef = useRef(sessionId);
+
+  useEffect(() => {
+    const prev = prevSessionIdRef.current;
+    prevSessionIdRef.current = sessionId;
+    if (prev && prev !== sessionId) {
+      queryClient.invalidateQueries({
+        queryKey: getGetV2GetSessionQueryKey(prev),
+      });
+    }
+  }, [sessionId, queryClient]);
+
+  // Memoize so the effect in useCopilotPage doesn't infinite-loop on a new
+  // array reference every render. Re-derives only when query data changes.
+  const hydratedMessages = useMemo(() => {
+    if (sessionQuery.data?.status !== 200 || !sessionId) return undefined;
+    return convertChatSessionMessagesToUiMessages(
+      sessionId,
+      sessionQuery.data.data.messages ?? [],
+    );
+  }, [sessionQuery.data, sessionId]);
+
+  const { mutateAsync: createSessionMutation, isPending: isCreatingSession } =
+    usePostV2CreateSession({
+      mutation: {
+        onSuccess: (response) => {
+          if (response.status === 200 && response.data?.id) {
+            setSessionId(response.data.id);
+            queryClient.invalidateQueries({
+              queryKey: getGetV2ListSessionsQueryKey(),
+            });
+          }
+        },
+      },
+    });
+
+  async function createSession() {
+    if (sessionId) return sessionId;
+    try {
+      const response = await createSessionMutation();
+      if (response.status !== 200 || !response.data?.id) {
+        const error = new Error("Failed to create session");
+        Sentry.captureException(error, {
+          extra: { status: response.status },
+        });
+        toast({
+          variant: "destructive",
+          title: "Could not start a new chat session",
+          description: "Please try again.",
+        });
+        throw error;
+      }
+      return response.data.id;
+    } catch (error) {
+      if (
+        error instanceof Error &&
+        error.message === "Failed to create session"
+      ) {
+        throw error; // already handled above
+      }
+      Sentry.captureException(error);
+      toast({
+        variant: "destructive",
+        title: "Could not start a new chat session",
+        description: "Please try again.",
+      });
+      throw error;
+    }
+  }
+
+  return {
+    sessionId,
+    setSessionId,
+    hydratedMessages,
+    isLoadingSession: sessionQuery.isLoading,
+    createSession,
+    isCreatingSession,
+  };
+}

autogpt_platform/frontend/src/app/(platform)/copilot/useCopilotPage.ts

@@ -1,127 +1,148 @@
-import {
-  getGetV2ListSessionsQueryKey,
-  postV2CreateSession,
-} from "@/app/api/__generated__/endpoints/chat/chat";
-import { useToast } from "@/components/molecules/Toast/use-toast";
+import { useGetV2ListSessions } from "@/app/api/__generated__/endpoints/chat/chat";
+import { useBreakpoint } from "@/lib/hooks/useBreakpoint";
 import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
-import { useOnboarding } from "@/providers/onboarding/onboarding-provider";
-import { SessionKey, sessionStorage } from "@/services/storage/session-storage";
-import * as Sentry from "@sentry/nextjs";
-import { useQueryClient } from "@tanstack/react-query";
+import { useChat } from "@ai-sdk/react";
+import { DefaultChatTransport } from "ai";
 import { useRouter } from "next/navigation";
-import { useEffect } from "react";
-import { useCopilotStore } from "./copilot-page-store";
-import { getGreetingName, getQuickActions } from "./helpers";
-import { useCopilotSessionId } from "./useCopilotSessionId";
+import { useEffect, useMemo, useState } from "react";
+import { useChatSession } from "./useChatSession";
 
 export function useCopilotPage() {
+  const { isUserLoading, isLoggedIn } = useSupabase();
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const [pendingMessage, setPendingMessage] = useState<string | null>(null);
   const router = useRouter();
-  const queryClient = useQueryClient();
-  const { user, isLoggedIn, isUserLoading } = useSupabase();
-  const { toast } = useToast();
-  const { completeStep } = useOnboarding();
 
-  const { urlSessionId, setUrlSessionId } = useCopilotSessionId();
-  const setIsStreaming = useCopilotStore((s) => s.setIsStreaming);
-  const isCreating = useCopilotStore((s) => s.isCreatingSession);
-  const setIsCreating = useCopilotStore((s) => s.setIsCreatingSession);
+  const {
+    sessionId,
+    setSessionId,
+    hydratedMessages,
+    isLoadingSession,
+    createSession,
+    isCreatingSession,
+  } = useChatSession();
 
-  const greetingName = getGreetingName(user);
-  const quickActions = getQuickActions();
+  const breakpoint = useBreakpoint();
+  const isMobile =
+    breakpoint === "base" || breakpoint === "sm" || breakpoint === "md";
 
-  const hasSession = Boolean(urlSessionId);
-  const initialPrompt = urlSessionId
-    ? getInitialPrompt(urlSessionId)
-    : undefined;
+  const transport = useMemo(
+    () =>
+      sessionId
+        ? new DefaultChatTransport({
+            api: `/api/chat/sessions/${sessionId}/stream`,
+            prepareSendMessagesRequest: ({ messages }) => {
+              const last = messages[messages.length - 1];
+              return {
+                body: {
+                  message: (
+                    last.parts?.map((p) => (p.type === "text" ? p.text : "")) ??
+                    []
+                  ).join(""),
+                  is_user_message: last.role === "user",
+                  context: null,
+                },
+              };
+            },
+          })
+        : null,
+    [sessionId],
+  );
+
+  const { messages, sendMessage, stop, status, error, setMessages } = useChat({
+    id: sessionId ?? undefined,
+    transport: transport ?? undefined,
+  });
 
   useEffect(() => {
-    if (isLoggedIn) completeStep("VISIT_COPILOT");
-  }, [completeStep, isLoggedIn]);
+    if (!isUserLoading && !isLoggedIn) router.replace("/login");
+  }, [isUserLoading, isLoggedIn]);
 
-  async function startChatWithPrompt(prompt: string) {
-    if (!prompt?.trim()) return;
-    if (isCreating) return;
+  useEffect(() => {
+    if (!hydratedMessages || hydratedMessages.length === 0) return;
+    setMessages((prev) => {
+      if (prev.length >= hydratedMessages.length) return prev;
+      return hydratedMessages;
+    });
+  }, [hydratedMessages, setMessages]);
 
-    const trimmedPrompt = prompt.trim();
-    setIsCreating(true);
+  // Clear messages when session is null
+  useEffect(() => {
+    if (!sessionId) setMessages([]);
+  }, [sessionId, setMessages]);
 
-    try {
-      const sessionResponse = await postV2CreateSession({
-        body: JSON.stringify({}),
-      });
+  useEffect(() => {
+    if (!sessionId || !pendingMessage) return;
+    const msg = pendingMessage;
+    setPendingMessage(null);
+    sendMessage({ text: msg });
+  }, [sessionId, pendingMessage, sendMessage]);
 
-      if (sessionResponse.status !== 200 || !sessionResponse.data?.id) {
-        throw new Error("Failed to create session");
-      }
+  async function onSend(message: string) {
+    const trimmed = message.trim();
+    if (!trimmed) return;
 
-      const sessionId = sessionResponse.data.id;
-      setInitialPrompt(sessionId, trimmedPrompt);
-
-      await queryClient.invalidateQueries({
-        queryKey: getGetV2ListSessionsQueryKey(),
-      });
-
-      await setUrlSessionId(sessionId, { shallow: true });
-    } catch (error) {
-      console.error("[CopilotPage] Failed to start chat:", error);
-      toast({ title: "Failed to start chat", variant: "destructive" });
-      Sentry.captureException(error);
-    } finally {
-      setIsCreating(false);
+    if (sessionId) {
+      sendMessage({ text: trimmed });
+      return;
     }
+
+    setPendingMessage(trimmed);
+    await createSession();
   }
 
-  function handleQuickAction(action: string) {
-    startChatWithPrompt(action);
+  const { data: sessionsResponse, isLoading: isLoadingSessions } =
+    useGetV2ListSessions(
+      { limit: 50 },
+      { query: { enabled: !isUserLoading && isLoggedIn } },
+    );
+
+  const sessions =
+    sessionsResponse?.status === 200 ? sessionsResponse.data.sessions : [];
+
+  function handleOpenDrawer() {
+    setIsDrawerOpen(true);
   }
 
-  function handleSessionNotFound() {
-    router.replace("/copilot");
+  function handleCloseDrawer() {
+    setIsDrawerOpen(false);
   }
 
-  function handleStreamingChange(isStreamingValue: boolean) {
-    setIsStreaming(isStreamingValue);
+  function handleDrawerOpenChange(open: boolean) {
+    setIsDrawerOpen(open);
+  }
+
+  function handleSelectSession(id: string) {
+    setSessionId(id);
+    if (isMobile) setIsDrawerOpen(false);
+  }
+
+  function handleNewChat() {
+    setSessionId(null);
+    if (isMobile) setIsDrawerOpen(false);
   }
 
   return {
-    state: {
-      greetingName,
-      quickActions,
-      isLoading: isUserLoading,
-      hasSession,
-      initialPrompt,
-    },
-    handlers: {
-      handleQuickAction,
-      startChatWithPrompt,
-      handleSessionNotFound,
-      handleStreamingChange,
-    },
+    sessionId,
+    messages,
+    status,
+    error,
+    stop,
+    isLoadingSession,
+    isCreatingSession,
+    isUserLoading,
+    isLoggedIn,
+    createSession,
+    onSend,
+    // Mobile drawer
+    isMobile,
+    isDrawerOpen,
+    sessions,
+    isLoadingSessions,
+    handleOpenDrawer,
+    handleCloseDrawer,
+    handleDrawerOpenChange,
+    handleSelectSession,
+    handleNewChat,
   };
 }
-
-function getInitialPrompt(sessionId: string): string | undefined {
-  try {
-    const prompts = JSON.parse(
-      sessionStorage.get(SessionKey.CHAT_INITIAL_PROMPTS) || "{}",
-    );
-    return prompts[sessionId];
-  } catch {
-    return undefined;
-  }
-}
-
-function setInitialPrompt(sessionId: string, prompt: string): void {
-  try {
-    const prompts = JSON.parse(
-      sessionStorage.get(SessionKey.CHAT_INITIAL_PROMPTS) || "{}",
-    );
-    prompts[sessionId] = prompt;
-    sessionStorage.set(
-      SessionKey.CHAT_INITIAL_PROMPTS,
-      JSON.stringify(prompts),
-    );
-  } catch {
-    // Ignore storage errors
-  }
-}

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/RunDetailHeader/RunDetailHeader.tsx

@@ -2,7 +2,7 @@ import { GraphExecution } from "@/app/api/__generated__/models/graphExecution";
 import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
 import { Text } from "@/components/atoms/Text/Text";
 import { ClockClockwiseIcon } from "@phosphor-icons/react";
-import moment from "moment";
+import { formatDistanceToNow, formatDistanceStrict } from "date-fns";
 import { AGENT_LIBRARY_SECTION_PADDING_X } from "../../../helpers";
 import { RunStatusBadge } from "../SelectedRunView/components/RunStatusBadge";
 
@@ -43,7 +43,10 @@ export function RunDetailHeader({ agent, run, scheduleRecurrence }: Props) {
           {run ? (
             <div className="mt-1 flex flex-wrap items-center gap-2 gap-y-1 text-zinc-400">
               <Text variant="small" className="text-zinc-500">
-                Started {moment(run.started_at).fromNow()}
+                Started{" "}
+                {run.started_at
+                  ? formatDistanceToNow(run.started_at, { addSuffix: true })
+                  : "—"}
               </Text>
               <span className="mx-1 inline-block text-zinc-200">|</span>
               <Text variant="small" className="text-zinc-500">
@@ -62,7 +65,7 @@ export function RunDetailHeader({ agent, run, scheduleRecurrence }: Props) {
                   <span className="mx-1 inline-block text-zinc-200">|</span>
                   <Text variant="small" className="text-zinc-500">
                     Duration:{" "}
-                    {moment.duration(run.stats.duration, "seconds").humanize()}
+                    {formatDistanceStrict(0, run.stats.duration * 1000)}
                   </Text>
                 </>
               )}

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/components/ScheduleListItem.tsx

@@ -3,7 +3,7 @@
 import { GraphExecutionJobInfo } from "@/app/api/__generated__/models/graphExecutionJobInfo";
 import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
 import { ClockClockwiseIcon } from "@phosphor-icons/react";
-import moment from "moment";
+import { formatDistanceToNow } from "date-fns";
 import { IconWrapper } from "./IconWrapper";
 import { ScheduleActionsDropdown } from "./ScheduleActionsDropdown";
 import { SidebarItemCard } from "./SidebarItemCard";
@@ -26,7 +26,9 @@ export function ScheduleListItem({
   return (
     <SidebarItemCard
       title={schedule.name}
-      description={moment(schedule.next_run_time).fromNow()}
+      description={formatDistanceToNow(schedule.next_run_time, {
+        addSuffix: true,
+      })}
       onClick={onClick}
       selected={selected}
       icon={

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/components/TaskListItem.tsx

@@ -11,7 +11,7 @@ import {
   WarningCircleIcon,
   XCircleIcon,
 } from "@phosphor-icons/react";
-import moment from "moment";
+import { formatDistanceToNow } from "date-fns";
 import React from "react";
 import { IconWrapper } from "./IconWrapper";
 import { SidebarItemCard } from "./SidebarItemCard";
@@ -76,7 +76,11 @@ export function TaskListItem({
     <SidebarItemCard
       icon={statusIconMap[run.status]}
       title={title}
-      description={moment(run.started_at).fromNow()}
+      description={
+        run.started_at
+          ? formatDistanceToNow(run.started_at, { addSuffix: true })
+          : "—"
+      }
       onClick={onClick}
       selected={selected}
       actions={

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/components/TemplateListItem.tsx

@@ -3,7 +3,7 @@
 import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
 import { LibraryAgentPreset } from "@/app/api/__generated__/models/libraryAgentPreset";
 import { FileTextIcon } from "@phosphor-icons/react";
-import moment from "moment";
+import { formatDistanceToNow } from "date-fns";
 import { IconWrapper } from "./IconWrapper";
 import { SidebarItemCard } from "./SidebarItemCard";
 import { TemplateActionsDropdown } from "./TemplateActionsDropdown";
@@ -31,7 +31,9 @@ export function TemplateListItem({
         </IconWrapper>
       }
       title={template.name}
-      description={moment(template.updated_at).fromNow()}
+      description={formatDistanceToNow(template.updated_at, {
+        addSuffix: true,
+      })}
       onClick={onClick}
       selected={selected}
       actions={

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/components/TriggerListItem.tsx

@@ -3,7 +3,7 @@
 import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
 import { LibraryAgentPreset } from "@/app/api/__generated__/models/libraryAgentPreset";
 import { LightningIcon } from "@phosphor-icons/react";
-import moment from "moment";
+import { formatDistanceToNow } from "date-fns";
 import { IconWrapper } from "./IconWrapper";
 import { SidebarItemCard } from "./SidebarItemCard";
 import { TriggerActionsDropdown } from "./TriggerActionsDropdown";
@@ -31,7 +31,7 @@ export function TriggerListItem({
         </IconWrapper>
       }
       title={trigger.name}
-      description={moment(trigger.updated_at).fromNow()}
+      description={formatDistanceToNow(trigger.updated_at, { addSuffix: true })}
       onClick={onClick}
       selected={selected}
       actions={

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-details-view.tsx

@@ -1,5 +1,5 @@
 "use client";
-import moment from "moment";
+import { format, formatDistanceToNow, formatDistanceStrict } from "date-fns";
 import React, { useCallback, useMemo, useEffect } from "react";
 
 import {
@@ -90,13 +90,15 @@ export function AgentRunDetailsView({
       },
       {
         label: "Started",
-        value: `${moment(run.started_at).fromNow()}, ${moment(run.started_at).format("HH:mm")}`,
+        value: run.started_at
+          ? `${formatDistanceToNow(run.started_at, { addSuffix: true })}, ${format(run.started_at, "HH:mm")}`
+          : "—",
       },
       ...(run.stats
         ? [
             {
               label: "Duration",
-              value: moment.duration(run.stats.duration, "seconds").humanize(),
+              value: formatDistanceStrict(0, run.stats.duration * 1000),
             },
             { label: "Steps", value: run.stats.node_exec_count },
             { label: "Cost", value: formatCredits(run.stats.cost) },

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-summary-card.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import moment from "moment";
+import { formatDistanceToNow, isPast } from "date-fns";
 
 import { cn } from "@/lib/utils";
 
@@ -118,10 +118,10 @@ export function AgentRunSummaryCard({
         {timestamp && (
           <p
             className="mt-1 text-sm font-normal text-neutral-500"
-            title={moment(timestamp).toString()}
+            title={new Date(timestamp).toString()}
           >
-            {moment(timestamp).isBefore() ? "Ran" : "Runs in"}{" "}
-            {moment(timestamp).fromNow()}
+            {isPast(timestamp) ? "Ran" : "Runs in"}{" "}
+            {formatDistanceToNow(timestamp, { addSuffix: true })}
           </p>
         )}
       </CardContent>

autogpt_platform/frontend/src/app/(platform)/library/components/LibrarySearchBar/useLibrarySearchbar.tsx

@@ -1,4 +1,4 @@
-import { debounce } from "lodash";
+import debounce from "lodash/debounce";
 import { useCallback, useEffect } from "react";
 
 interface Props {

autogpt_platform/frontend/src/app/(platform)/monitoring/components/AgentFlowList.tsx

@@ -30,7 +30,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/__legacy__/ui/table";
-import moment from "moment/moment";
+import { formatDistanceToNow } from "date-fns";
 import { DialogTitle } from "@/components/__legacy__/ui/dialog";
 import { AgentImportForm } from "./AgentImportForm";
 
@@ -161,8 +161,12 @@ export const AgentFlowList = ({
                     (!lastRun ? (
                       <TableCell />
                     ) : (
-                      <TableCell title={moment(lastRun.started_at).toString()}>
-                        {moment(lastRun.started_at).fromNow()}
+                      <TableCell title={lastRun.started_at?.toString() ?? ""}>
+                        {lastRun.started_at
+                          ? formatDistanceToNow(lastRun.started_at, {
+                              addSuffix: true,
+                            })
+                          : "—"}
                       </TableCell>
                     ))}
                 </TableRow>

autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunInfo.tsx

@@ -10,7 +10,7 @@ import Link from "next/link";
 import { Button, buttonVariants } from "@/components/__legacy__/ui/button";
 import { IconSquare } from "@/components/__legacy__/ui/icons";
 import { ExitIcon, Pencil2Icon } from "@radix-ui/react-icons";
-import moment from "moment/moment";
+import { format } from "date-fns";
 import { FlowRunStatusBadge } from "@/app/(platform)/monitoring/components/FlowRunStatusBadge";
 import { useBackendAPI } from "@/lib/autogpt-server-api/context";
 import RunnerOutputUI, {
@@ -111,11 +111,15 @@ export const FlowRunInfo: React.FC<
           </div>
           <p>
             <strong>Started:</strong>{" "}
-            {moment(execution.started_at).format("YYYY-MM-DD HH:mm:ss")}
+            {execution.started_at
+              ? format(execution.started_at, "yyyy-MM-dd HH:mm:ss")
+              : "—"}
           </p>
           <p>
             <strong>Finished:</strong>{" "}
-            {moment(execution.ended_at).format("YYYY-MM-DD HH:mm:ss")}
+            {execution.ended_at
+              ? format(execution.ended_at, "yyyy-MM-dd HH:mm:ss")
+              : "—"}
           </p>
           {execution.stats && (
             <p>

autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunsList.tsx

@@ -14,7 +14,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/__legacy__/ui/table";
-import moment from "moment/moment";
+import { format } from "date-fns";
 import { FlowRunStatusBadge } from "@/app/(platform)/monitoring/components/FlowRunStatusBadge";
 import { TextRenderer } from "../../../../components/__legacy__/ui/render";
 
@@ -59,7 +59,9 @@ export const FlowRunsList: React.FC<{
                 />
               </TableCell>
               <TableCell>
-                {moment(execution.started_at).format("HH:mm")}
+                {execution.started_at
+                  ? format(execution.started_at, "HH:mm")
+                  : "—"}
               </TableCell>
               <TableCell>
                 <FlowRunStatusBadge