extracted frontend changes out of the hackathon/copilot branch

feat(frontend): upgrade RJSF to v6 and implement new FormRenderer system
(#11677) Fixes #11686 ### Changes 🏗️ This PR upgrades the React JSON Schema Form (RJSF) library from v5 to v6 and introduces a complete rewrite of the form rendering system with improved architecture and new features. #### Core Library Updates - Upgraded `@rjsf/core` from 5.24.13 to 6.1.2 - Upgraded `@rjsf/utils` from 5.24.13 to 6.1.2 - Added `@radix-ui/react-slider` 1.3.6 for new slider components #### New Form Renderer Architecture - **Base Templates**: Created modular base templates for arrays, objects, and standard fields - **AnyOf Support**: Implemented `AnyOfField` component with type selector for union types - **Array Fields**: New `ArrayFieldTemplate`, `ArrayFieldItemTemplate`, and `ArraySchemaField` with context provider - **Object Fields**: Enhanced `ObjectFieldTemplate` with better support for additional properties via `WrapIfAdditionalTemplate` - **Field Templates**: New `TitleField`, `DescriptionField`, and `FieldTemplate` with improved styling - **Custom Widgets**: Implemented TextWidget, SelectWidget, CheckboxWidget, FileWidget, DateWidget, TimeWidget, and DateTimeWidget - **Button Components**: Custom AddButton, RemoveButton, and CopyButton components #### Node Handle System Refactor - Split `NodeHandle` into `InputNodeHandle` and `OutputNodeHandle` for better separation of concerns - Refactored handle ID generation logic in `helpers.ts` with new `generateHandleIdFromTitleId` function - Improved handle connection detection using edge store - Added support for nested output handles (objects within outputs) #### Edge Store Improvements - Added `removeEdgesByHandlePrefix` method for bulk edge removal - Improved `isInputConnected` with handle ID cleanup - Optimized `updateEdgeBeads` to only update when changes occur - Better edge management with `applyEdgeChanges` #### Node Store Enhancements - Added `syncHardcodedValuesWithHandleIds` method to maintain consistency between form data and handle connections - Better handling of additional properties in objects - Improved path parsing with `parseHandleIdToPath` and `ensurePathExists` #### Draft Recovery Improvements - Added diff calculation with `calculateDraftDiff` to show what changed - New `formatDiffSummary` to display changes in a readable format (e.g., "+2/-1 blocks, +3 connections") - Better visual feedback for draft changes #### UI/UX Enhancements - Fixed node container width to 350px for consistency - Improved field error display with inline error messages - Better spacing and styling throughout forms - Enhanced tooltip support for field descriptions - Improved array item controls with better button placement - Context-aware field sizing (small/large) #### Output Handler Updates - Recursive rendering of nested output properties - Better type display with color coding - Improved handle connections for complex output schemas #### Migration & Cleanup - Updated `RunInputDialog` to use new FormRenderer - Updated `FormCreator` to use new FormRenderer - Moved OAuth callback types to separate file - Updated import paths from `input-renderer` to `InputRenderer` - Removed unused console.log statements - Added `type="button"` to buttons to prevent form submission ### Checklist 📋 #### For code changes: - [x] I have clearly listed my changes in the PR description - [x] I have made a test plan - [x] I have tested my changes according to the test plan: - [x] Test form rendering with various field types (text, number, boolean, arrays, objects) - [x] Test anyOf field type selector functionality - [x] Test array item addition/removal - [x] Test nested object fields with additional properties - [x] Test input/output node handle connections - [x] Test draft recovery with diff display - [x] Verify backward compatibility with existing agents - [x] Test field validation and error display - [x] Verify handle ID generation for complex schemas  ## Summary by CodeRabbit * **New Features** * Improved form field rendering with enhanced support for optional types, arrays, and nested objects. * Enhanced draft recovery display showing detailed difference tracking (added, removed, modified items). * Better OAuth popup callback handling with structured message types. * **Bug Fixes** * Improved node handle ID normalization and synchronization. * Enhanced edge management for complex field changes. * Fixed styling consistency across form components. * **Dependencies** * Updated React JSON Schema Form library to version 6.1.2. * Added Radix UI slider component support. <sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub>
2026-01-12 08:38:09 -05:00 · 2026-01-07 09:28:39 +01:00 · 2026-01-07 05:06:34 +00:00
202 changed files with 11101 additions and 3604 deletions
--- a/autogpt_platform/frontend/package.json
+++ b/autogpt_platform/frontend/package.json
@@ -46,13 +46,14 @@
    "@radix-ui/react-scroll-area": "1.2.10",
    "@radix-ui/react-select": "2.2.6",
    "@radix-ui/react-separator": "1.1.7",
+    "@radix-ui/react-slider": "1.3.6",
    "@radix-ui/react-slot": "1.2.3",
    "@radix-ui/react-switch": "1.2.6",
    "@radix-ui/react-tabs": "1.1.13",
    "@radix-ui/react-toast": "1.2.15",
    "@radix-ui/react-tooltip": "1.2.8",
-    "@rjsf/core": "5.24.13",
-    "@rjsf/utils": "5.24.13",
+    "@rjsf/core": "6.1.2",
+    "@rjsf/utils": "6.1.2",
    "@rjsf/validator-ajv8": "5.24.13",
    "@sentry/nextjs": "10.27.0",
    "@supabase/ssr": "0.7.0",
--- a/autogpt_platform/frontend/pnpm-lock.yaml
+++ b/autogpt_platform/frontend/pnpm-lock.yaml
@@ -62,6 +62,9 @@ importers:
      '@radix-ui/react-separator':
        specifier: 1.1.7
        version: 1.1.7(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slider':
+        specifier: 1.3.6
+        version: 1.3.6(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
      '@radix-ui/react-slot':
        specifier: 1.2.3
        version: 1.2.3(@types/react@18.3.17)(react@18.3.1)
@@ -78,14 +81,14 @@ importers:
        specifier: 1.2.8
        version: 1.2.8(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
      '@rjsf/core':
-        specifier: 5.24.13
-        version: 5.24.13(@rjsf/utils@5.24.13(react@18.3.1))(react@18.3.1)
+        specifier: 6.1.2
+        version: 6.1.2(@rjsf/utils@6.1.2(react@18.3.1))(react@18.3.1)
      '@rjsf/utils':
-        specifier: 5.24.13
-        version: 5.24.13(react@18.3.1)
+        specifier: 6.1.2
+        version: 6.1.2(react@18.3.1)
      '@rjsf/validator-ajv8':
        specifier: 5.24.13
-        version: 5.24.13(@rjsf/utils@5.24.13(react@18.3.1))
+        version: 5.24.13(@rjsf/utils@6.1.2(react@18.3.1))
      '@sentry/nextjs':
        specifier: 10.27.0
        version: 10.27.0(@opentelemetry/context-async-hooks@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0))(next@15.4.10(@babel/core@7.28.4)(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(webpack@5.101.3(esbuild@0.25.9))
@@ -2310,6 +2313,19 @@ packages:
      '@types/react-dom':
        optional: true

+  '@radix-ui/react-slider@1.3.6':
+    resolution: {integrity: sha512-JPYb1GuM1bxfjMRlNLE+BcmBC8onfCi60Blk7OBqi2MLTFdS+8401U4uFjnwkOr49BLmXxLC6JHkvAsx5OJvHw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
  '@radix-ui/react-slot@1.2.3':
    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
    peerDependencies:
@@ -2479,18 +2495,18 @@ packages:
      react-redux:
        optional: true

-  '@rjsf/core@5.24.13':
-    resolution: {integrity: sha512-ONTr14s7LFIjx2VRFLuOpagL76sM/HPy6/OhdBfq6UukINmTIs6+aFN0GgcR0aXQHFDXQ7f/fel0o/SO05Htdg==}
-    engines: {node: '>=14'}
+  '@rjsf/core@6.1.2':
+    resolution: {integrity: sha512-fcEO6kArMcVIzTBoBxNStqxzAL417NDw049nmNx11pIcMwUnU5sAkSW18c8kgZOT6v1xaZhQrY+X5cBzzHy9+g==}
+    engines: {node: '>=20'}
    peerDependencies:
-      '@rjsf/utils': ^5.24.x
-      react: ^16.14.0 || >=17
+      '@rjsf/utils': ^6.x
+      react: '>=18'

-  '@rjsf/utils@5.24.13':
-    resolution: {integrity: sha512-rNF8tDxIwTtXzz5O/U23QU73nlhgQNYJ+Sv5BAwQOIyhIE2Z3S5tUiSVMwZHt0julkv/Ryfwi+qsD4FiE5rOuw==}
-    engines: {node: '>=14'}
+  '@rjsf/utils@6.1.2':
+    resolution: {integrity: sha512-Px3FIkE1KK0745Qng9v88RZ0O7hcLf/1JUu0j00g+r6C8Zyokna42Hz/5TKyyQSKJqgVYcj2Z47YroVLenUM3A==}
+    engines: {node: '>=20'}
    peerDependencies:
-      react: ^16.14.0 || >=17
+      react: '>=18'

  '@rjsf/validator-ajv8@5.24.13':
    resolution: {integrity: sha512-oWHP7YK581M8I5cF1t+UXFavnv+bhcqjtL1a7MG/Kaffi0EwhgcYjODrD8SsnrhncsEYMqSECr4ZOEoirnEUWw==}
@@ -3643,6 +3659,9 @@ packages:
  '@webassemblyjs/wast-printer@1.14.1':
    resolution: {integrity: sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==}

+  '@x0k/json-schema-merge@1.0.2':
+    resolution: {integrity: sha512-1734qiJHNX3+cJGDMMw2yz7R+7kpbAtl5NdPs1c/0gO5kYT6s4dMbLXiIfpZNsOYhGZI3aH7FWrj4Zxz7epXNg==}
+
  '@xtuc/ieee754@1.2.0':
    resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==}

@@ -4159,12 +4178,6 @@ packages:
  compare-versions@6.1.1:
    resolution: {integrity: sha512-4hm4VPpIecmlg59CHXnRDnqGplJFrbLG4aFEl5vl6cK1u76ws3LLvX7ikFnTDl5vo39sjWD6AaDPYodJp/NNHg==}

-  compute-gcd@1.2.1:
-    resolution: {integrity: sha512-TwMbxBNz0l71+8Sc4czv13h4kEqnchV9igQZBi6QUaz09dnz13juGnnaWWJTRsP3brxOoxeB4SA2WELLw1hCtg==}
-
-  compute-lcm@1.1.2:
-    resolution: {integrity: sha512-OFNPdQAXnQhDSKioX8/XYT6sdUlXwpeMjfd6ApxMJfyZ4GxmLR1xvMERctlYhlHwIiz6CSpBc2+qYKjHGZw4TQ==}
-
  concat-map@0.0.1:
    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}

@@ -4829,6 +4842,9 @@ packages:
  fast-uri@3.0.6:
    resolution: {integrity: sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw==}

+  fast-uri@3.1.0:
+    resolution: {integrity: sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==}
+
  fastq@1.19.1:
    resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}

@@ -5477,13 +5493,6 @@ packages:
  json-parse-even-better-errors@2.3.1:
    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}

-  json-schema-compare@0.2.2:
-    resolution: {integrity: sha512-c4WYmDKyJXhs7WWvAWm3uIYnfyWFoIp+JEoX34rctVvEkMYCPGhXtvmFFXiffBbxfZsvQ0RNnV5H7GvDF5HCqQ==}
-
-  json-schema-merge-allof@0.8.1:
-    resolution: {integrity: sha512-CTUKmIlPJbsWfzRRnOXz+0MjIqvnleIXwFTzz+t9T86HnYX/Rozria6ZVGLktAU9e+NygNljveP+yxqtQp/Q4w==}
-    engines: {node: '>=12.0.0'}
-
  json-schema-traverse@0.4.1:
    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}

@@ -5599,6 +5608,9 @@ packages:
  lodash-es@4.17.21:
    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}

+  lodash-es@4.17.22:
+    resolution: {integrity: sha512-XEawp1t0gxSi9x01glktRZ5HDy0HXqrM0x5pXQM98EaI0NxO6jVM7omDOxsuEo5UIASAnm2bRp1Jt/e0a2XU8Q==}
+
  lodash.camelcase@4.3.0:
    resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}

@@ -5688,11 +5700,14 @@ packages:
  markdown-table@3.0.4:
    resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}

-  markdown-to-jsx@7.7.13:
-    resolution: {integrity: sha512-DiueEq2bttFcSxUs85GJcQVrOr0+VVsPfj9AEUPqmExJ3f8P/iQNvZHltV4tm1XVhu1kl0vWBZWT3l99izRMaA==}
+  markdown-to-jsx@8.0.0:
+    resolution: {integrity: sha512-hWEaRxeCDjes1CVUQqU+Ov0mCqBqkGhLKjL98KdbwHSgEWZZSJQeGlJQatVfeZ3RaxrfTrZZ3eczl2dhp5c/pA==}
    engines: {node: '>= 10'}
    peerDependencies:
      react: '>= 0.14.0'
+    peerDependenciesMeta:
+      react:
+        optional: true

  math-intrinsics@1.1.0:
    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
@@ -7578,21 +7593,6 @@ packages:
    resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
    hasBin: true

-  validate.io-array@1.0.6:
-    resolution: {integrity: sha512-DeOy7CnPEziggrOO5CZhVKJw6S3Yi7e9e65R1Nl/RTN1vTQKnzjfvks0/8kQ40FP/dsjRAOd4hxmJ7uLa6vxkg==}
-
-  validate.io-function@1.0.2:
-    resolution: {integrity: sha512-LlFybRJEriSuBnUhQyG5bwglhh50EpTL2ul23MPIuR1odjO7XaMLFV8vHGwp7AZciFxtYOeiSCT5st+XSPONiQ==}
-
-  validate.io-integer-array@1.0.0:
-    resolution: {integrity: sha512-mTrMk/1ytQHtCY0oNO3dztafHYyGU88KL+jRxWuzfOmQb+4qqnWmI+gykvGp8usKZOM0H7keJHEbRaFiYA0VrA==}
-
-  validate.io-integer@1.0.5:
-    resolution: {integrity: sha512-22izsYSLojN/P6bppBqhgUDjCkr5RY2jd+N2a3DCAUey8ydvrZ/OkGvFPR7qfOpwR2LC5p4Ngzxz36g5Vgr/hQ==}
-
-  validate.io-number@1.0.3:
-    resolution: {integrity: sha512-kRAyotcbNaSYoDnXvb4MHg/0a1egJdLwS6oJ38TJY7aw9n93Fl/3blIXdyYvPOp55CNxywooG/3BcrwNrBpcSg==}
-
  validator@13.15.20:
    resolution: {integrity: sha512-KxPOq3V2LmfQPP4eqf3Mq/zrT0Dqp2Vmx2Bn285LwVahLc+CsxOM0crBHczm8ijlcjZ0Q5Xd6LW3z3odTPnlrw==}
    engines: {node: '>= 0.10'}
@@ -9903,6 +9903,25 @@ snapshots:
      '@types/react': 18.3.17
      '@types/react-dom': 18.3.5(@types/react@18.3.17)

+  '@radix-ui/react-slider@1.3.6(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.17)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.17)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.3.17)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.17)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.17)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.3.17)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.17)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.17
+      '@types/react-dom': 18.3.5(@types/react@18.3.17)
+
  '@radix-ui/react-slot@1.2.3(@types/react@18.3.17)(react@18.3.1)':
    dependencies:
      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.17)(react@18.3.1)
@@ -10065,27 +10084,28 @@ snapshots:
      react: 18.3.1
      react-redux: 9.2.0(@types/react@18.3.17)(react@18.3.1)(redux@5.0.1)

-  '@rjsf/core@5.24.13(@rjsf/utils@5.24.13(react@18.3.1))(react@18.3.1)':
+  '@rjsf/core@6.1.2(@rjsf/utils@6.1.2(react@18.3.1))(react@18.3.1)':
    dependencies:
-      '@rjsf/utils': 5.24.13(react@18.3.1)
+      '@rjsf/utils': 6.1.2(react@18.3.1)
      lodash: 4.17.21
-      lodash-es: 4.17.21
-      markdown-to-jsx: 7.7.13(react@18.3.1)
+      lodash-es: 4.17.22
+      markdown-to-jsx: 8.0.0(react@18.3.1)
      prop-types: 15.8.1
      react: 18.3.1

-  '@rjsf/utils@5.24.13(react@18.3.1)':
+  '@rjsf/utils@6.1.2(react@18.3.1)':
    dependencies:
-      json-schema-merge-allof: 0.8.1
+      '@x0k/json-schema-merge': 1.0.2
+      fast-uri: 3.1.0
      jsonpointer: 5.0.1
      lodash: 4.17.21
-      lodash-es: 4.17.21
+      lodash-es: 4.17.22
      react: 18.3.1
      react-is: 18.3.1

-  '@rjsf/validator-ajv8@5.24.13(@rjsf/utils@5.24.13(react@18.3.1))':
+  '@rjsf/validator-ajv8@5.24.13(@rjsf/utils@6.1.2(react@18.3.1))':
    dependencies:
-      '@rjsf/utils': 5.24.13(react@18.3.1)
+      '@rjsf/utils': 6.1.2(react@18.3.1)
      ajv: 8.17.1
      ajv-formats: 2.1.1(ajv@8.17.1)
      lodash: 4.17.21
@@ -11502,6 +11522,10 @@ snapshots:
      '@webassemblyjs/ast': 1.14.1
      '@xtuc/long': 4.2.2

+  '@x0k/json-schema-merge@1.0.2':
+    dependencies:
+      '@types/json-schema': 7.0.15
+
  '@xtuc/ieee754@1.2.0': {}

  '@xtuc/long@4.2.2': {}
@@ -12041,19 +12065,6 @@ snapshots:

  compare-versions@6.1.1: {}

-  compute-gcd@1.2.1:
-    dependencies:
-      validate.io-array: 1.0.6
-      validate.io-function: 1.0.2
-      validate.io-integer-array: 1.0.0
-
-  compute-lcm@1.1.2:
-    dependencies:
-      compute-gcd: 1.2.1
-      validate.io-array: 1.0.6
-      validate.io-function: 1.0.2
-      validate.io-integer-array: 1.0.0
-
  concat-map@0.0.1: {}

  concurrently@9.2.1:
@@ -12932,6 +12943,8 @@ snapshots:

  fast-uri@3.0.6: {}

+  fast-uri@3.1.0: {}
+
  fastq@1.19.1:
    dependencies:
      reusify: 1.1.0
@@ -13641,16 +13654,6 @@ snapshots:

  json-parse-even-better-errors@2.3.1: {}

-  json-schema-compare@0.2.2:
-    dependencies:
-      lodash: 4.17.21
-
-  json-schema-merge-allof@0.8.1:
-    dependencies:
-      compute-lcm: 1.1.2
-      json-schema-compare: 0.2.2
-      lodash: 4.17.21
-
  json-schema-traverse@0.4.1: {}

  json-schema-traverse@1.0.0: {}
@@ -13766,6 +13769,8 @@ snapshots:

  lodash-es@4.17.21: {}

+  lodash-es@4.17.22: {}
+
  lodash.camelcase@4.3.0: {}

  lodash.debounce@4.0.8: {}
@@ -13845,8 +13850,8 @@ snapshots:

  markdown-table@3.0.4: {}

-  markdown-to-jsx@7.7.13(react@18.3.1):
-    dependencies:
+  markdown-to-jsx@8.0.0(react@18.3.1):
+    optionalDependencies:
      react: 18.3.1

  math-intrinsics@1.1.0: {}
@@ -16202,21 +16207,6 @@ snapshots:

  uuid@9.0.1: {}

-  validate.io-array@1.0.6: {}
-
-  validate.io-function@1.0.2: {}
-
-  validate.io-integer-array@1.0.0:
-    dependencies:
-      validate.io-array: 1.0.6
-      validate.io-integer: 1.0.5
-
-  validate.io-integer@1.0.5:
-    dependencies:
-      validate.io-number: 1.0.3
-
-  validate.io-number@1.0.3: {}
-
  validator@13.15.20: {}

  vaul@1.1.2(@types/react-dom@18.3.5(@types/react@18.3.17))(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
--- a/autogpt_platform/frontend/src/app/(no-navbar)/onboarding/5-run/components/AgentOnboardingCredentials/AgentOnboardingCredentials.tsx
+++ b/autogpt_platform/frontend/src/app/(no-navbar)/onboarding/5-run/components/AgentOnboardingCredentials/AgentOnboardingCredentials.tsx
@@ -1,6 +1,6 @@
-import { CredentialsInput } from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/CredentialsInputs";
 import { CredentialsMetaInput } from "@/app/api/__generated__/models/credentialsMetaInput";
 import { GraphMeta } from "@/app/api/__generated__/models/graphMeta";
+import { CredentialsInput } from "@/components/contextual/CredentialsInputs/CredentialsInputs";
 import { useState } from "react";
 import { getSchemaDefaultCredentials } from "../../helpers";
 import { areAllCredentialsSet, getCredentialFields } from "./helpers";
--- a/autogpt_platform/frontend/src/app/(no-navbar)/onboarding/5-run/page.tsx
+++ b/autogpt_platform/frontend/src/app/(no-navbar)/onboarding/5-run/page.tsx
@@ -1,12 +1,12 @@
 "use client";

-import { RunAgentInputs } from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentInputs/RunAgentInputs";
 import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
 } from "@/components/__legacy__/ui/card";
+import { RunAgentInputs } from "@/components/contextual/RunAgentInputs/RunAgentInputs";
 import { ErrorCard } from "@/components/molecules/ErrorCard/ErrorCard";
 import { CircleNotchIcon } from "@phosphor-icons/react/dist/ssr";
 import { Play } from "lucide-react";
--- a/autogpt_platform/frontend/src/app/(platform)/PlatformLayoutContent.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/PlatformLayoutContent.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import { ChatDrawer } from "@/components/contextual/Chat/ChatDrawer";
+import { usePathname } from "next/navigation";
+import { Children, ReactNode } from "react";
+
+interface PlatformLayoutContentProps {
+  children: ReactNode;
+}
+
+export function PlatformLayoutContent({
+  children,
+}: PlatformLayoutContentProps) {
+  const pathname = usePathname();
+  const isAuthPage =
+    pathname?.includes("/login") || pathname?.includes("/signup");
+
+  // Extract Navbar, AdminImpersonationBanner, and page content from children
+  const childrenArray = Children.toArray(children);
+  const navbar = childrenArray[0];
+  const adminBanner = childrenArray[1];
+  const pageContent = childrenArray.slice(2);
+
+  // For login/signup pages, use a simpler layout that doesn't interfere with centering
+  if (isAuthPage) {
+    return (
+      <main className="flex min-h-screen w-full flex-col">
+        {navbar}
+        {adminBanner}
+        <section className="flex-1">{pageContent}</section>
+      </main>
+    );
+  }
+
+  // For logged-in pages, use the drawer layout
+  return (
+    <main className="flex h-screen w-full flex-col overflow-hidden">
+      {navbar}
+      {adminBanner}
+      <section className="flex min-h-0 flex-1 overflow-auto">
+        {pageContent}
+      </section>
+      <ChatDrawer />
+    </main>
+  );
+}
--- a/autogpt_platform/frontend/src/app/(platform)/auth/integrations/oauth_callback/route.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/auth/integrations/oauth_callback/route.ts
@@ -1,4 +1,4 @@
-import { OAuthPopupResultMessage } from "@/components/renderers/input-renderer/fields/CredentialField/models/OAuthCredentialModal/useOAuthCredentialModal";
+import { OAuthPopupResultMessage } from "./types";
 import { NextResponse } from "next/server";

 // This route is intended to be used as the callback for integration OAuth flows,
--- a/autogpt_platform/frontend/src/app/(platform)/auth/integrations/oauth_callback/types.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/auth/integrations/oauth_callback/types.ts
@@ -0,0 +1,11 @@
+export type OAuthPopupResultMessage = { message_type: "oauth_popup_result" } & (
+  | {
+      success: true;
+      code: string;
+      state: string;
+    }
+  | {
+      success: false;
+      message: string;
+    }
+);
--- a/autogpt_platform/frontend/src/app/(platform)/auth/integrations/setup-wizard/page.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/auth/integrations/setup-wizard/page.tsx
@@ -8,7 +8,7 @@ import { AuthCard } from "@/components/auth/AuthCard";
 import { Text } from "@/components/atoms/Text/Text";
 import { Button } from "@/components/atoms/Button/Button";
 import { ErrorCard } from "@/components/molecules/ErrorCard/ErrorCard";
-import { CredentialsInput } from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/CredentialsInputs";
+import { CredentialsInput } from "@/components/contextual/CredentialsInputs/CredentialsInputs";
 import type {
  BlockIOCredentialsSubSchema,
  CredentialsMetaInput,
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/AgentOutputs/AgentOutputs.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/AgentOutputs/AgentOutputs.tsx
@@ -1,11 +1,6 @@
 import { BlockUIType } from "@/app/(platform)/build/components/types";
 import { useGraphStore } from "@/app/(platform)/build/stores/graphStore";
 import { useNodeStore } from "@/app/(platform)/build/stores/nodeStore";
-import {
-  globalRegistry,
-  OutputActions,
-  OutputItem,
-} from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/OutputRenderers";
 import { Label } from "@/components/__legacy__/ui/label";
 import { ScrollArea } from "@/components/__legacy__/ui/scroll-area";
 import {
@@ -23,6 +18,11 @@ import {
  TooltipProvider,
  TooltipTrigger,
 } from "@/components/atoms/Tooltip/BaseTooltip";
+import {
+  globalRegistry,
+  OutputActions,
+  OutputItem,
+} from "@/components/contextual/OutputRenderers";
 import { BookOpenIcon } from "@phosphor-icons/react";
 import { useMemo } from "react";
 import { useShallow } from "zustand/react/shallow";
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/RunInputDialog.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/RunInputDialog.tsx
@@ -5,7 +5,7 @@ import { useGraphStore } from "@/app/(platform)/build/stores/graphStore";
 import { Button } from "@/components/atoms/Button/Button";
 import { ClockIcon, PlayIcon } from "@phosphor-icons/react";
 import { Text } from "@/components/atoms/Text/Text";
-import { FormRenderer } from "@/components/renderers/input-renderer/FormRenderer";
+import { FormRenderer } from "@/components/renderers/InputRenderer/FormRenderer";
 import { useRunInputDialog } from "./useRunInputDialog";
 import { CronSchedulerDialog } from "../CronSchedulerDialog/CronSchedulerDialog";

--- a/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.ts
@@ -8,7 +8,7 @@ import {
 import { parseAsInteger, parseAsString, useQueryStates } from "nuqs";
 import { useMemo, useState } from "react";
 import { uiSchema } from "../../../FlowEditor/nodes/uiSchema";
-import { isCredentialFieldSchema } from "@/components/renderers/input-renderer/fields/CredentialField/helpers";
+import { isCredentialFieldSchema } from "@/components/renderers/InputRenderer/custom/CredentialField/helpers";

 export const useRunInputDialog = ({
  setIsOpen,
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/DraftRecoveryDialog/DraftRecoveryPopup.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/DraftRecoveryDialog/DraftRecoveryPopup.tsx
@@ -12,16 +12,59 @@ import {
 import { useDraftRecoveryPopup } from "./useDraftRecoveryPopup";
 import { Text } from "@/components/atoms/Text/Text";
 import { AnimatePresence, motion } from "framer-motion";
+import { DraftDiff } from "@/lib/dexie/draft-utils";

 interface DraftRecoveryPopupProps {
  isInitialLoadComplete: boolean;
 }

+function formatDiffSummary(diff: DraftDiff | null): string {
+  if (!diff) return "";
+
+  const parts: string[] = [];
+
+  // Node changes
+  const nodeChanges: string[] = [];
+  if (diff.nodes.added > 0) nodeChanges.push(`+${diff.nodes.added}`);
+  if (diff.nodes.removed > 0) nodeChanges.push(`-${diff.nodes.removed}`);
+  if (diff.nodes.modified > 0) nodeChanges.push(`~${diff.nodes.modified}`);
+
+  if (nodeChanges.length > 0) {
+    parts.push(
+      `${nodeChanges.join("/")} block${diff.nodes.added + diff.nodes.removed + diff.nodes.modified !== 1 ? "s" : ""}`,
+    );
+  }
+
+  // Edge changes
+  const edgeChanges: string[] = [];
+  if (diff.edges.added > 0) edgeChanges.push(`+${diff.edges.added}`);
+  if (diff.edges.removed > 0) edgeChanges.push(`-${diff.edges.removed}`);
+  if (diff.edges.modified > 0) edgeChanges.push(`~${diff.edges.modified}`);
+
+  if (edgeChanges.length > 0) {
+    parts.push(
+      `${edgeChanges.join("/")} connection${diff.edges.added + diff.edges.removed + diff.edges.modified !== 1 ? "s" : ""}`,
+    );
+  }
+
+  return parts.join(", ");
+}
+
 export function DraftRecoveryPopup({
  isInitialLoadComplete,
 }: DraftRecoveryPopupProps) {
-  const { isOpen, popupRef, nodeCount, edgeCount, savedAt, onLoad, onDiscard } =
-    useDraftRecoveryPopup(isInitialLoadComplete);
+  const {
+    isOpen,
+    popupRef,
+    nodeCount,
+    edgeCount,
+    diff,
+    savedAt,
+    onLoad,
+    onDiscard,
+  } = useDraftRecoveryPopup(isInitialLoadComplete);
+
+  const diffSummary = formatDiffSummary(diff);

  return (
    <AnimatePresence>
@@ -72,10 +115,9 @@ export function DraftRecoveryPopup({
                variant="small"
                className="text-amber-700 dark:text-amber-400"
              >
-                {nodeCount} block{nodeCount !== 1 ? "s" : ""}, {edgeCount}{" "}
-                connection
-                {edgeCount !== 1 ? "s" : ""} •{" "}
-                {formatTimeAgo(new Date(savedAt).toISOString())}
+                {diffSummary ||
+                  `${nodeCount} block${nodeCount !== 1 ? "s" : ""}, ${edgeCount} connection${edgeCount !== 1 ? "s" : ""}`}{" "}
+                • {formatTimeAgo(new Date(savedAt).toISOString())}
              </Text>
            </div>

--- a/autogpt_platform/frontend/src/app/(platform)/build/components/DraftRecoveryDialog/useDraftRecoveryPopup.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/DraftRecoveryDialog/useDraftRecoveryPopup.tsx
@@ -9,6 +9,7 @@ export const useDraftRecoveryPopup = (isInitialLoadComplete: boolean) => {
    savedAt,
    nodeCount,
    edgeCount,
+    diff,
    loadDraft: onLoad,
    discardDraft: onDiscard,
  } = useDraftManager(isInitialLoadComplete);
@@ -54,6 +55,7 @@ export const useDraftRecoveryPopup = (isInitialLoadComplete: boolean) => {
    isOpen,
    nodeCount,
    edgeCount,
+    diff,
    savedAt,
    onLoad,
    onDiscard,
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/helpers/resolve-collision.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/helpers/resolve-collision.ts
@@ -48,8 +48,6 @@ export const resolveCollisions: CollisionAlgorithm = (
    const width = (node.width ?? node.measured?.width ?? 0) + margin * 2;
    const height = (node.height ?? node.measured?.height ?? 0) + margin * 2;

-    console.log("width", width);
-    console.log("height", height);
    const x = node.position.x - margin;
    const y = node.position.y - margin;

--- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/useDraftManager.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/useDraftManager.ts
@@ -7,7 +7,12 @@ import {
  DraftData,
 } from "@/services/builder-draft/draft-service";
 import { BuilderDraft } from "@/lib/dexie/db";
-import { cleanNodes, cleanEdges } from "@/lib/dexie/draft-utils";
+import {
+  cleanNodes,
+  cleanEdges,
+  calculateDraftDiff,
+  DraftDiff,
+} from "@/lib/dexie/draft-utils";
 import { useNodeStore } from "../../../stores/nodeStore";
 import { useEdgeStore } from "../../../stores/edgeStore";
 import { useGraphStore } from "../../../stores/graphStore";
@@ -19,6 +24,7 @@ const AUTO_SAVE_INTERVAL_MS = 15000; // 15 seconds
 interface DraftRecoveryState {
  isOpen: boolean;
  draft: BuilderDraft | null;
+  diff: DraftDiff | null;
 }

 /**
@@ -31,6 +37,7 @@ export function useDraftManager(isInitialLoadComplete: boolean) {
  const [state, setState] = useState<DraftRecoveryState>({
    isOpen: false,
    draft: null,
+    diff: null,
  });

  const [{ flowID, flowVersion }] = useQueryStates({
@@ -207,9 +214,16 @@ export function useDraftManager(isInitialLoadComplete: boolean) {
      );

      if (isDifferent && (draft.nodes.length > 0 || draft.edges.length > 0)) {
+        const diff = calculateDraftDiff(
+          draft.nodes,
+          draft.edges,
+          currentNodes,
+          currentEdges,
+        );
        setState({
          isOpen: true,
          draft,
+          diff,
        });
      } else {
        await draftService.deleteDraft(effectiveFlowId);
@@ -231,6 +245,7 @@ export function useDraftManager(isInitialLoadComplete: boolean) {
    setState({
      isOpen: false,
      draft: null,
+      diff: null,
    });
  }, [flowID]);

@@ -242,8 +257,10 @@ export function useDraftManager(isInitialLoadComplete: boolean) {
    try {
      useNodeStore.getState().setNodes(draft.nodes);
      useEdgeStore.getState().setEdges(draft.edges);
+      draft.nodes.forEach((node) => {
+        useNodeStore.getState().syncHardcodedValuesWithHandleIds(node.id);
+      });

-      // Restore nodeCounter to prevent ID conflicts when adding new nodes
      if (draft.nodeCounter !== undefined) {
        useNodeStore.setState({ nodeCounter: draft.nodeCounter });
      }
@@ -267,6 +284,7 @@ export function useDraftManager(isInitialLoadComplete: boolean) {
      setState({
        isOpen: false,
        draft: null,
+        diff: null,
      });
    } catch (error) {
      console.error("[DraftRecovery] Failed to load draft:", error);
@@ -275,7 +293,7 @@ export function useDraftManager(isInitialLoadComplete: boolean) {

  const discardDraft = useCallback(async () => {
    if (!state.draft) {
-      setState({ isOpen: false, draft: null });
+      setState({ isOpen: false, draft: null, diff: null });
      return;
    }

@@ -285,7 +303,7 @@ export function useDraftManager(isInitialLoadComplete: boolean) {
      console.error("[DraftRecovery] Failed to discard draft:", error);
    }

-    setState({ isOpen: false, draft: null });
+    setState({ isOpen: false, draft: null, diff: null });
  }, [state.draft]);

  return {
@@ -294,6 +312,7 @@ export function useDraftManager(isInitialLoadComplete: boolean) {
    savedAt: state.draft?.savedAt ?? 0,
    nodeCount: state.draft?.nodes.length ?? 0,
    edgeCount: state.draft?.edges.length ?? 0,
+    diff: state.diff,
    loadDraft,
    discardDraft,
  };
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/useFlow.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/useFlow.ts
@@ -121,6 +121,14 @@ export const useFlow = () => {
    if (customNodes.length > 0) {
      useNodeStore.getState().setNodes([]);
      addNodes(customNodes);
+
+      // Sync hardcoded values with handle IDs.
+      // If a key–value field has a key without a value, the backend omits it from hardcoded values.
+      // But if a handleId exists for that key, it causes inconsistency.
+      // This ensures hardcoded values stay in sync with handle IDs.
+      customNodes.forEach((node) => {
+        useNodeStore.getState().syncHardcodedValuesWithHandleIds(node.id);
+      });
    }
  }, [customNodes, addNodes]);

--- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/edges/useCustomEdge.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/edges/useCustomEdge.ts
@@ -1,12 +1,17 @@
-import { Connection as RFConnection, EdgeChange } from "@xyflow/react";
+import {
+  Connection as RFConnection,
+  EdgeChange,
+  applyEdgeChanges,
+} from "@xyflow/react";
 import { useEdgeStore } from "@/app/(platform)/build/stores/edgeStore";
 import { useCallback } from "react";
 import { useNodeStore } from "../../../stores/nodeStore";
+import { CustomEdge } from "./CustomEdge";

 export const useCustomEdge = () => {
  const edges = useEdgeStore((s) => s.edges);
  const addEdge = useEdgeStore((s) => s.addEdge);
-  const removeEdge = useEdgeStore((s) => s.removeEdge);
+  const setEdges = useEdgeStore((s) => s.setEdges);

  const onConnect = useCallback(
    (conn: RFConnection) => {
@@ -45,14 +50,10 @@ export const useCustomEdge = () => {
  );

  const onEdgesChange = useCallback(
-    (changes: EdgeChange[]) => {
-      changes.forEach((change) => {
-        if (change.type === "remove") {
-          removeEdge(change.id);
-        }
-      });
+    (changes: EdgeChange<CustomEdge>[]) => {
+      setEdges(applyEdgeChanges(changes, edges));
    },
-    [removeEdge],
+    [edges, setEdges],
  );

  return { edges, onConnect, onEdgesChange };
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/handlers/NodeHandle.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/handlers/NodeHandle.tsx
@@ -1,26 +1,32 @@
 import { CircleIcon } from "@phosphor-icons/react";
 import { Handle, Position } from "@xyflow/react";
+import { useEdgeStore } from "../../../stores/edgeStore";
+import { cleanUpHandleId } from "@/components/renderers/InputRenderer/helpers";
+import { cn } from "@/lib/utils";

-const NodeHandle = ({
+const InputNodeHandle = ({
  handleId,
-  isConnected,
-  side,
+  nodeId,
 }: {
  handleId: string;
-  isConnected: boolean;
-  side: "left" | "right";
+  nodeId: string;
 }) => {
+  const cleanedHandleId = cleanUpHandleId(handleId);
+  const isInputConnected = useEdgeStore((state) =>
+    state.isInputConnected(nodeId ?? "", cleanedHandleId),
+  );
+
  return (
    <Handle
-      type={side === "left" ? "target" : "source"}
-      position={side === "left" ? Position.Left : Position.Right}
-      id={handleId}
-      className={side === "left" ? "-ml-4 mr-2" : "-mr-2 ml-2"}
+      type={"target"}
+      position={Position.Left}
+      id={cleanedHandleId}
+      className={"-ml-6 mr-2"}
    >
      <div className="pointer-events-none">
        <CircleIcon
          size={16}
-          weight={isConnected ? "fill" : "duotone"}
+          weight={isInputConnected ? "fill" : "duotone"}
          className={"text-gray-400 opacity-100"}
        />
      </div>
@@ -28,4 +34,35 @@ const NodeHandle = ({
  );
 };

-export default NodeHandle;
+const OutputNodeHandle = ({
+  field_name,
+  nodeId,
+  hexColor,
+}: {
+  field_name: string;
+  nodeId: string;
+  hexColor: string;
+}) => {
+  const isOutputConnected = useEdgeStore((state) =>
+    state.isOutputConnected(nodeId, field_name),
+  );
+  return (
+    <Handle
+      type={"source"}
+      position={Position.Right}
+      id={field_name}
+      className={"-mr-2 ml-2"}
+    >
+      <div className="pointer-events-none">
+        <CircleIcon
+          size={16}
+          weight={"duotone"}
+          color={isOutputConnected ? hexColor : "gray"}
+          className={cn("text-gray-400 opacity-100")}
+        />
+      </div>
+    </Handle>
+  );
+};
+
+export { InputNodeHandle, OutputNodeHandle };
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/handlers/helpers.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/handlers/helpers.ts
@@ -1,31 +1,4 @@
-/**
- * Handle ID Types for different input structures
- *
- * Examples:
- * SIMPLE: "message"
- * NESTED: "config.api_key"
- * ARRAY: "items_$_0", "items_$_1"
- * KEY_VALUE: "headers_#_Authorization", "params_#_limit"
- *
- * Note: All handle IDs are sanitized to remove spaces and special characters.
- * Spaces become underscores, and special characters are removed.
- * Example: "user name" becomes "user_name", "email@domain.com" becomes "emaildomaincom"
- */
-export enum HandleIdType {
-  SIMPLE = "SIMPLE",
-  NESTED = "NESTED",
-  ARRAY = "ARRAY",
-  KEY_VALUE = "KEY_VALUE",
-}
-
-const fromRjsfId = (id: string): string => {
-  if (!id) return "";
-  const parts = id.split("_");
-  const filtered = parts.filter(
-    (p) => p !== "root" && p !== "properties" && p.length > 0,
-  );
-  return filtered.join("_") || "";
-};
+// Here we are handling single level of nesting, if need more in future then i will update it

 const sanitizeForHandleId = (str: string): string => {
  if (!str) return "";
@@ -38,51 +11,53 @@ const sanitizeForHandleId = (str: string): string => {
    .replace(/^_|_$/g, ""); // Remove leading/trailing underscores
 };

-export const generateHandleId = (
+const cleanTitleId = (id: string): string => {
+  if (!id) return "";
+
+  if (id.endsWith("_title")) {
+    id = id.slice(0, -6);
+  }
+  const parts = id.split("_");
+  const filtered = parts.filter(
+    (p) => p !== "root" && p !== "properties" && p.length > 0,
+  );
+  const filtered_id = filtered.join("_") || "";
+  return filtered_id;
+};
+
+export const generateHandleIdFromTitleId = (
  fieldKey: string,
-  nestedValues: string[] = [],
-  type: HandleIdType = HandleIdType.SIMPLE,
+  {
+    isObjectProperty,
+    isAdditionalProperty,
+    isArrayItem,
+  }: {
+    isArrayItem?: boolean;
+    isObjectProperty?: boolean;
+    isAdditionalProperty?: boolean;
+  } = {
+    isArrayItem: false,
+    isObjectProperty: false,
+    isAdditionalProperty: false,
+  },
 ): string => {
  if (!fieldKey) return "";

-  fieldKey = fromRjsfId(fieldKey);
-  fieldKey = sanitizeForHandleId(fieldKey);
+  const filteredKey = cleanTitleId(fieldKey);
+  if (isAdditionalProperty || isArrayItem) {
+    return filteredKey;
+  }
+  const cleanedKey = sanitizeForHandleId(filteredKey);

-  if (type === HandleIdType.SIMPLE || nestedValues.length === 0) {
-    return fieldKey;
+  if (isObjectProperty) {
+    // "config_api_key" -> "config.api_key"
+    const parts = cleanedKey.split("_");
+    if (parts.length >= 2) {
+      const baseName = parts[0];
+      const propertyName = parts.slice(1).join("_");
+      return `${baseName}.${propertyName}`;
+    }
  }

-  const sanitizedNestedValues = nestedValues.map((value) =>
-    sanitizeForHandleId(value),
-  );
-
-  switch (type) {
-    case HandleIdType.NESTED:
-      return [fieldKey, ...sanitizedNestedValues].join(".");
-
-    case HandleIdType.ARRAY:
-      return [fieldKey, ...sanitizedNestedValues].join("_$_");
-
-    case HandleIdType.KEY_VALUE:
-      return [fieldKey, ...sanitizedNestedValues].join("_#_");
-
-    default:
-      return fieldKey;
-  }
-};
-
-export const parseKeyValueHandleId = (
-  handleId: string,
-  type: HandleIdType,
-): string => {
-  if (type === HandleIdType.KEY_VALUE) {
-    return handleId.split("_#_")[1];
-  } else if (type === HandleIdType.ARRAY) {
-    return handleId.split("_$_")[1];
-  } else if (type === HandleIdType.NESTED) {
-    return handleId.split(".")[1];
-  } else if (type === HandleIdType.SIMPLE) {
-    return handleId.split("_")[1];
-  }
-  return "";
+  return cleanedKey;
 };
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/CustomNode.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/CustomNode.tsx
@@ -10,7 +10,7 @@ import { NodeExecutionResult } from "@/app/api/__generated__/models/nodeExecutio
 import { NodeContainer } from "./components/NodeContainer";
 import { NodeHeader } from "./components/NodeHeader";
 import { FormCreator } from "../FormCreator";
-import { preprocessInputSchema } from "@/components/renderers/input-renderer/utils/input-schema-pre-processor";
+import { preprocessInputSchema } from "@/components/renderers/InputRenderer/utils/input-schema-pre-processor";
 import { OutputHandler } from "../OutputHandler";
 import { NodeAdvancedToggle } from "./components/NodeAdvancedToggle";
 import { NodeDataRenderer } from "./components/NodeOutput/NodeOutput";
@@ -99,7 +99,7 @@ export const CustomNode: React.FC<NodeProps<CustomNode>> = React.memo(
            nodeId={nodeId}
            uiType={data.uiType}
            className={cn(
-              "bg-white pr-6",
+              "bg-white px-4",
              isWebhook && "pointer-events-none opacity-50",
            )}
            showHandles={showHandles}
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeAdvancedToggle.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeAdvancedToggle.tsx
@@ -8,7 +8,7 @@ export const NodeAdvancedToggle = ({ nodeId }: { nodeId: string }) => {
  );
  const setShowAdvanced = useNodeStore((state) => state.setShowAdvanced);
  return (
-    <div className="flex items-center justify-between gap-2 rounded-b-xlarge border-t border-slate-200/50 bg-white px-5 py-3.5">
+    <div className="flex items-center justify-between gap-2 rounded-b-xlarge border-t border-zinc-200 bg-white px-5 py-3.5">
      <Text variant="body" className="font-medium text-slate-700">
        Advanced
      </Text>
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeContainer.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeContainer.tsx
@@ -22,7 +22,7 @@ export const NodeContainer = ({
  return (
    <div
      className={cn(
-        "z-12 max-w-[370px] rounded-xlarge ring-1 ring-slate-200/60",
+        "z-12 w-[350px] rounded-xlarge ring-1 ring-slate-200/60",
        selected && "shadow-lg ring-2 ring-slate-200",
        status && nodeStyleBasedOnStatus[status],
        hasErrors ? nodeStyleBasedOnStatus[AgentExecutionStatus.FAILED] : "",
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeHeader.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeHeader.tsx
@@ -23,7 +23,9 @@ export const NodeHeader = ({
  const updateNodeData = useNodeStore((state) => state.updateNodeData);
  const title = (data.metadata?.customized_name as string) || data.title;
  const [isEditingTitle, setIsEditingTitle] = useState(false);
-  const [editedTitle, setEditedTitle] = useState(title);
+  const [editedTitle, setEditedTitle] = useState(
+    beautifyString(title).replace("Block", "").trim(),
+  );

  const handleTitleEdit = () => {
    updateNodeData(nodeId, {
@@ -41,7 +43,7 @@ export const NodeHeader = ({
  };

  return (
-    <div className="flex h-auto flex-col gap-1 rounded-xlarge border-b border-slate-200/50 bg-gradient-to-r from-slate-50/80 to-white/90 px-4 py-4 pt-3">
+    <div className="flex h-auto flex-col gap-1 rounded-xlarge border-b border-zinc-200 bg-gradient-to-r from-slate-50/80 to-white/90 px-4 py-4 pt-3">
      {/* Title row with context menu */}
      <div className="flex items-start justify-between gap-2">
        <div className="flex min-w-0 flex-1 items-center gap-2">
@@ -68,12 +70,12 @@ export const NodeHeader = ({
                  <TooltipTrigger asChild>
                    <div>
                      <Text variant="large-semibold" className="line-clamp-1">
-                        {beautifyString(title)}
+                        {beautifyString(title).replace("Block", "").trim()}
                      </Text>
                    </div>
                  </TooltipTrigger>
                  <TooltipContent>
-                    <p>{beautifyString(title)}</p>
+                    <p>{beautifyString(title).replace("Block", "").trim()}</p>
                  </TooltipContent>
                </Tooltip>
              </TooltipProvider>
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsx
@@ -23,7 +23,7 @@ export const NodeDataRenderer = ({ nodeId }: { nodeId: string }) => {
  }

  return (
-    <div className="flex flex-col gap-3 rounded-b-xl border-t border-slate-200/50 px-4 py-4">
+    <div className="flex flex-col gap-3 rounded-b-xl border-t border-zinc-200 px-4 py-4">
      <div className="flex items-center justify-between">
        <Text variant="body-medium" className="!font-semibold text-slate-700">
          Node Output
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/components/ContentRenderer.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/components/ContentRenderer.tsx
@@ -1,7 +1,7 @@
 "use client";

-import type { OutputMetadata } from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/OutputRenderers";
-import { globalRegistry } from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/OutputRenderers";
+import type { OutputMetadata } from "@/components/contextual/OutputRenderers";
+import { globalRegistry } from "@/components/contextual/OutputRenderers";

 export const TextRenderer: React.FC<{
  value: any;
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/components/NodeDataViewer/NodeDataViewer.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/components/NodeDataViewer/NodeDataViewer.tsx
@@ -1,7 +1,3 @@
-import {
-  OutputActions,
-  OutputItem,
-} from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/OutputRenderers";
 import { ScrollArea } from "@/components/__legacy__/ui/scroll-area";
 import { Button } from "@/components/atoms/Button/Button";
 import { Text } from "@/components/atoms/Text/Text";
@@ -11,6 +7,10 @@ import {
  TooltipProvider,
  TooltipTrigger,
 } from "@/components/atoms/Tooltip/BaseTooltip";
+import {
+  OutputActions,
+  OutputItem,
+} from "@/components/contextual/OutputRenderers";
 import { Dialog } from "@/components/molecules/Dialog/Dialog";
 import { beautifyString } from "@/lib/utils";
 import {
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/components/NodeDataViewer/useNodeDataViewer.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/components/NodeDataViewer/useNodeDataViewer.ts
@@ -1,6 +1,6 @@
-import type { OutputMetadata } from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/OutputRenderers";
-import { globalRegistry } from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/OutputRenderers";
-import { downloadOutputs } from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/OutputRenderers/utils/download";
+import type { OutputMetadata } from "@/components/contextual/OutputRenderers";
+import { globalRegistry } from "@/components/contextual/OutputRenderers";
+import { downloadOutputs } from "@/components/contextual/OutputRenderers/utils/download";
 import { useToast } from "@/components/molecules/Toast/use-toast";
 import { beautifyString } from "@/lib/utils";
 import React, { useMemo, useState } from "react";
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/StickyNoteBlock.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/StickyNoteBlock.tsx
@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { FormCreator } from "../../FormCreator";
-import { preprocessInputSchema } from "@/components/renderers/input-renderer/utils/input-schema-pre-processor";
+import { preprocessInputSchema } from "@/components/renderers/InputRenderer/utils/input-schema-pre-processor";
 import { CustomNodeData } from "../CustomNode";
 import { Text } from "@/components/atoms/Text/Text";
 import { cn } from "@/lib/utils";
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/WebhookDisclaimer.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/WebhookDisclaimer.tsx
@@ -1,10 +1,10 @@
-import { Alert, AlertDescription } from "@/components/molecules/Alert/Alert";
-import { Text } from "@/components/atoms/Text/Text";
-import Link from "next/link";
 import { useGetV2GetLibraryAgentByGraphId } from "@/app/api/__generated__/endpoints/library/library";
 import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
-import { useQueryStates, parseAsString } from "nuqs";
-import { isValidUUID } from "@/app/(platform)/chat/helpers";
+import { Text } from "@/components/atoms/Text/Text";
+import { isValidUUID } from "@/components/contextual/Chat/helpers";
+import { Alert, AlertDescription } from "@/components/molecules/Alert/Alert";
+import Link from "next/link";
+import { parseAsString, useQueryStates } from "nuqs";

 export const WebhookDisclaimer = ({ nodeId }: { nodeId: string }) => {
  const [{ flowID }] = useQueryStates({
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/FormCreator.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/FormCreator.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import { uiSchema } from "./uiSchema";
 import { useNodeStore } from "../../../stores/nodeStore";
 import { BlockUIType } from "../../types";
-import { FormRenderer } from "@/components/renderers/input-renderer/FormRenderer";
+import { FormRenderer } from "@/components/renderers/InputRenderer/FormRenderer";

 export const FormCreator = React.memo(
  ({
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/OutputHandler.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/OutputHandler.tsx
@@ -4,7 +4,7 @@ import { CaretDownIcon, InfoIcon } from "@phosphor-icons/react";
 import { RJSFSchema } from "@rjsf/utils";
 import { useState } from "react";

-import NodeHandle from "../handlers/NodeHandle";
+import { OutputNodeHandle } from "../handlers/NodeHandle";
 import {
  Tooltip,
  TooltipContent,
@@ -13,7 +13,6 @@ import {
 } from "@/components/atoms/Tooltip/BaseTooltip";
 import { useEdgeStore } from "@/app/(platform)/build/stores/edgeStore";
 import { getTypeDisplayInfo } from "./helpers";
-import { generateHandleId } from "../handlers/helpers";
 import { BlockUIType } from "../../types";

 export const OutputHandler = ({
@@ -29,8 +28,73 @@ export const OutputHandler = ({
  const properties = outputSchema?.properties || {};
  const [isOutputVisible, setIsOutputVisible] = useState(true);

+  const showHandles = uiType !== BlockUIType.OUTPUT;
+
+  const renderOutputHandles = (
+    schema: RJSFSchema,
+    keyPrefix: string = "",
+    titlePrefix: string = "",
+  ): React.ReactNode[] => {
+    return Object.entries(schema).map(
+      ([key, fieldSchema]: [string, RJSFSchema]) => {
+        const fullKey = keyPrefix ? `${keyPrefix}_#_${key}` : key;
+        const fieldTitle = titlePrefix + (fieldSchema?.title || key);
+
+        const isConnected = isOutputConnected(nodeId, fullKey);
+        const shouldShow = isConnected || isOutputVisible;
+        const { displayType, colorClass, hexColor } =
+          getTypeDisplayInfo(fieldSchema);
+
+        return shouldShow ? (
+          <div key={fullKey} className="flex flex-col items-end gap-2">
+            <div className="relative flex items-center gap-2">
+              {fieldSchema?.description && (
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <span
+                        style={{ marginLeft: 6, cursor: "pointer" }}
+                        aria-label="info"
+                        tabIndex={0}
+                      >
+                        <InfoIcon />
+                      </span>
+                    </TooltipTrigger>
+                    <TooltipContent>{fieldSchema?.description}</TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              )}
+              <Text variant="body" className="text-slate-700">
+                {fieldTitle}
+              </Text>
+              <Text variant="small" as="span" className={colorClass}>
+                ({displayType})
+              </Text>
+
+              {showHandles && (
+                <OutputNodeHandle
+                  field_name={fullKey}
+                  nodeId={nodeId}
+                  hexColor={hexColor}
+                />
+              )}
+            </div>
+
+            {/* Recursively render nested properties */}
+            {fieldSchema?.properties &&
+              renderOutputHandles(
+                fieldSchema.properties,
+                fullKey,
+                `${fieldTitle}.`,
+              )}
+          </div>
+        ) : null;
+      },
+    );
+  };
+
  return (
-    <div className="flex flex-col items-end justify-between gap-2 rounded-b-xlarge border-t border-slate-200/50 bg-white py-3.5">
+    <div className="flex flex-col items-end justify-between gap-2 rounded-b-xlarge border-t border-zinc-200 bg-white py-3.5">
      <Button
        variant="ghost"
        className="mr-4 h-fit min-w-0 p-0 hover:border-transparent hover:bg-transparent"
@@ -49,50 +113,9 @@ export const OutputHandler = ({
        </Text>
      </Button>

-      {
-        <div className="flex flex-col items-end gap-2">
-          {Object.entries(properties).map(([key, property]: [string, any]) => {
-            const isConnected = isOutputConnected(nodeId, key);
-            const shouldShow = isConnected || isOutputVisible;
-            const { displayType, colorClass } = getTypeDisplayInfo(property);
-
-            return shouldShow ? (
-              <div key={key} className="relative flex items-center gap-2">
-                {property?.description && (
-                  <TooltipProvider>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <span
-                          style={{ marginLeft: 6, cursor: "pointer" }}
-                          aria-label="info"
-                          tabIndex={0}
-                        >
-                          <InfoIcon />
-                        </span>
-                      </TooltipTrigger>
-                      <TooltipContent>{property?.description}</TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
-                )}
-                <Text variant="body" className="text-slate-700">
-                  {property?.title || key}{" "}
-                </Text>
-                <Text variant="small" as="span" className={colorClass}>
-                  ({displayType})
-                </Text>
-
-                <NodeHandle
-                  handleId={
-                    uiType === BlockUIType.AGENT ? key : generateHandleId(key)
-                  }
-                  isConnected={isConnected}
-                  side="right"
-                />
-              </div>
-            ) : null;
-          })}
-        </div>
-      }
+      <div className="flex flex-col items-end gap-2">
+        {renderOutputHandles(properties)}
+      </div>
    </div>
  );
 };
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/helpers.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/helpers.ts
@@ -92,14 +92,38 @@ export const getTypeDisplayInfo = (schema: any) => {
  if (schema?.type === "string" && schema?.format) {
    const formatMap: Record<
      string,
-      { displayType: string; colorClass: string }
+      { displayType: string; colorClass: string; hexColor: string }
    > = {
-      file: { displayType: "file", colorClass: "!text-green-500" },
-      date: { displayType: "date", colorClass: "!text-blue-500" },
-      time: { displayType: "time", colorClass: "!text-blue-500" },
-      "date-time": { displayType: "datetime", colorClass: "!text-blue-500" },
-      "long-text": { displayType: "text", colorClass: "!text-green-500" },
-      "short-text": { displayType: "text", colorClass: "!text-green-500" },
+      file: {
+        displayType: "file",
+        colorClass: "!text-green-500",
+        hexColor: "#22c55e",
+      },
+      date: {
+        displayType: "date",
+        colorClass: "!text-blue-500",
+        hexColor: "#3b82f6",
+      },
+      time: {
+        displayType: "time",
+        colorClass: "!text-blue-500",
+        hexColor: "#3b82f6",
+      },
+      "date-time": {
+        displayType: "datetime",
+        colorClass: "!text-blue-500",
+        hexColor: "#3b82f6",
+      },
+      "long-text": {
+        displayType: "text",
+        colorClass: "!text-green-500",
+        hexColor: "#22c55e",
+      },
+      "short-text": {
+        displayType: "text",
+        colorClass: "!text-green-500",
+        hexColor: "#22c55e",
+      },
    };

    const formatInfo = formatMap[schema.format];
@@ -131,10 +155,23 @@ export const getTypeDisplayInfo = (schema: any) => {
    any: "!text-gray-500",
  };

+  const hexColorMap: Record<string, string> = {
+    string: "#22c55e",
+    number: "#3b82f6",
+    integer: "#3b82f6",
+    boolean: "#eab308",
+    object: "#a855f7",
+    array: "#6366f1",
+    null: "#6b7280",
+    any: "#6b7280",
+  };
+
  const colorClass = colorMap[schema?.type] || "!text-gray-500";
+  const hexColor = hexColorMap[schema?.type] || "#6b7280";

  return {
    displayType,
    colorClass,
+    hexColor,
  };
 };
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/ExpandableOutputDialog.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/ExpandableOutputDialog.tsx
@@ -1,9 +1,9 @@
-import type { OutputMetadata } from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/OutputRenderers";
+import type { OutputMetadata } from "@/components/contextual/OutputRenderers";
 import {
  globalRegistry,
  OutputActions,
  OutputItem,
-} from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/OutputRenderers";
+} from "@/components/contextual/OutputRenderers";
 import { Dialog } from "@/components/molecules/Dialog/Dialog";
 import { beautifyString } from "@/lib/utils";
 import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
--- a/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/NodeInputs.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/NodeInputs.tsx
@@ -3,7 +3,6 @@ import {
  CustomNodeData,
 } from "@/app/(platform)/build/components/legacy-builder/CustomNode/CustomNode";
 import { NodeTableInput } from "@/app/(platform)/build/components/legacy-builder/NodeTableInput";
-import { CredentialsInput } from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/CredentialsInputs";
 import { Button } from "@/components/__legacy__/ui/button";
 import { Calendar } from "@/components/__legacy__/ui/calendar";
 import { LocalValuedInput } from "@/components/__legacy__/ui/input";
@@ -28,6 +27,7 @@ import {
  SelectValue,
 } from "@/components/__legacy__/ui/select";
 import { Switch } from "@/components/atoms/Switch/Switch";
+import { CredentialsInput } from "@/components/contextual/CredentialsInputs/CredentialsInputs";
 import { GoogleDrivePickerInput } from "@/components/contextual/GoogleDrivePicker/GoogleDrivePickerInput";
 import {
  BlockIOArraySubSchema,
--- a/autogpt_platform/frontend/src/app/(platform)/build/stores/edgeStore.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/build/stores/edgeStore.ts
@@ -4,6 +4,7 @@ import { CustomEdge } from "../components/FlowEditor/edges/CustomEdge";
 import { customEdgeToLink, linkToCustomEdge } from "../components/helper";
 import { MarkerType } from "@xyflow/react";
 import { NodeExecutionResult } from "@/app/api/__generated__/models/nodeExecutionResult";
+import { cleanUpHandleId } from "@/components/renderers/InputRenderer/helpers";

 type EdgeStore = {
  edges: CustomEdge[];
@@ -13,6 +14,8 @@ type EdgeStore = {
  removeEdge: (edgeId: string) => void;
  upsertMany: (edges: CustomEdge[]) => void;

+  removeEdgesByHandlePrefix: (nodeId: string, handlePrefix: string) => void;
+
  getNodeEdges: (nodeId: string) => CustomEdge[];
  isInputConnected: (nodeId: string, handle: string) => boolean;
  isOutputConnected: (nodeId: string, handle: string) => boolean;
@@ -79,11 +82,27 @@ export const useEdgeStore = create<EdgeStore>((set, get) => ({
      return { edges: Array.from(byKey.values()) };
    }),

+  removeEdgesByHandlePrefix: (nodeId, handlePrefix) =>
+    set((state) => ({
+      edges: state.edges.filter(
+        (e) =>
+          !(
+            e.target === nodeId &&
+            e.targetHandle &&
+            e.targetHandle.startsWith(handlePrefix)
+          ),
+      ),
+    })),
+
  getNodeEdges: (nodeId) =>
    get().edges.filter((e) => e.source === nodeId || e.target === nodeId),

-  isInputConnected: (nodeId, handle) =>
-    get().edges.some((e) => e.target === nodeId && e.targetHandle === handle),
+  isInputConnected: (nodeId, handle) => {
+    const cleanedHandle = cleanUpHandleId(handle);
+    return get().edges.some(
+      (e) => e.target === nodeId && e.targetHandle === cleanedHandle,
+    );
+  },

  isOutputConnected: (nodeId, handle) =>
    get().edges.some((e) => e.source === nodeId && e.sourceHandle === handle),
@@ -105,15 +124,15 @@ export const useEdgeStore = create<EdgeStore>((set, get) => ({
    targetNodeId: string,
    executionResult: NodeExecutionResult,
  ) => {
-    set((state) => ({
-      edges: state.edges.map((edge) => {
+    set((state) => {
+      let hasChanges = false;
+
+      const newEdges = state.edges.map((edge) => {
        if (edge.target !== targetNodeId) {
          return edge;
        }

-        const beadData =
-          edge.data?.beadData ??
-          new Map<string, NodeExecutionResult["status"]>();
+        const beadData = new Map(edge.data?.beadData ?? new Map());

        const inputValue = edge.targetHandle
          ? executionResult.input_data[edge.targetHandle]
@@ -137,6 +156,11 @@ export const useEdgeStore = create<EdgeStore>((set, get) => ({
          beadUp = beadDown + 1;
        }

+        if (edge.data?.beadUp === beadUp && edge.data?.beadDown === beadDown) {
+          return edge;
+        }
+
+        hasChanges = true;
        return {
          ...edge,
          data: {
@@ -146,8 +170,10 @@ export const useEdgeStore = create<EdgeStore>((set, get) => ({
            beadData,
          },
        };
-      }),
-    }));
+      });
+
+      return hasChanges ? { edges: newEdges } : state;
+    });
  },

  resetEdgeBeads: () => {
--- a/autogpt_platform/frontend/src/app/(platform)/build/stores/nodeStore.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/build/stores/nodeStore.ts
@@ -13,6 +13,10 @@ import { useHistoryStore } from "./historyStore";
 import { useEdgeStore } from "./edgeStore";
 import { BlockUIType } from "../components/types";
 import { pruneEmptyValues } from "@/lib/utils";
+import {
+  ensurePathExists,
+  parseHandleIdToPath,
+} from "@/components/renderers/InputRenderer/helpers";

 // Minimum movement (in pixels) required before logging position change to history
 // Prevents spamming history with small movements when clicking on inputs inside blocks
@@ -62,6 +66,8 @@ type NodeStore = {
    errors: { [key: string]: string },
  ) => void;
  clearAllNodeErrors: () => void; // Add this
+
+  syncHardcodedValuesWithHandleIds: (nodeId: string) => void;
 };

 export const useNodeStore = create<NodeStore>((set, get) => ({
@@ -305,4 +311,35 @@ export const useNodeStore = create<NodeStore>((set, get) => ({
      })),
    }));
  },
+
+  syncHardcodedValuesWithHandleIds: (nodeId: string) => {
+    const node = get().nodes.find((n) => n.id === nodeId);
+    if (!node) return;
+
+    const handleIds = useEdgeStore.getState().getAllHandleIdsOfANode(nodeId);
+    const additionalHandles = handleIds.filter((h) => h.includes("_#_"));
+
+    if (additionalHandles.length === 0) return;
+
+    const hardcodedValues = JSON.parse(
+      JSON.stringify(node.data.hardcodedValues || {}),
+    );
+
+    let modified = false;
+
+    additionalHandles.forEach((handleId) => {
+      const segments = parseHandleIdToPath(handleId);
+      if (ensurePathExists(hardcodedValues, segments)) {
+        modified = true;
+      }
+    });
+
+    if (modified) {
+      set((state) => ({
+        nodes: state.nodes.map((n) =>
+          n.id === nodeId ? { ...n, data: { ...n.data, hardcodedValues } } : n,
+        ),
+      }));
+    }
+  },
 }));
--- a/autogpt_platform/frontend/src/app/(platform)/chat/page.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/chat/page.tsx
@@ -1,16 +1,24 @@
 "use client";

-import { useChatPage } from "./useChatPage";
-import { ChatContainer } from "./components/ChatContainer/ChatContainer";
-import { ChatErrorState } from "./components/ChatErrorState/ChatErrorState";
-import { ChatLoadingState } from "./components/ChatLoadingState/ChatLoadingState";
-import { useGetFlag, Flag } from "@/services/feature-flags/use-get-flag";
-import { useRouter } from "next/navigation";
+import { Button } from "@/components/__legacy__/ui/button";
+import { scrollbarStyles } from "@/components/styles/scrollbars";
+import { cn } from "@/lib/utils";
+import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
+import { X } from "@phosphor-icons/react";
+import { usePathname, useRouter } from "next/navigation";
 import { useEffect } from "react";
+import { Drawer } from "vaul";
+
+import { ChatContainer } from "@/components/contextual/Chat/components/ChatContainer/ChatContainer";
+import { ChatErrorState } from "@/components/contextual/Chat/components/ChatErrorState/ChatErrorState";
+import { ChatLoadingState } from "@/components/contextual/Chat/components/ChatLoadingState/ChatLoadingState";
+import { useChatPage } from "./useChatPage";

 export default function ChatPage() {
  const isChatEnabled = useGetFlag(Flag.CHAT);
  const router = useRouter();
+  const pathname = usePathname();
+  const isOpen = pathname === "/chat";
  const {
    messages,
    isLoading,
@@ -28,56 +36,88 @@ export default function ChatPage() {
    }
  }, [isChatEnabled, router]);

+  function handleOpenChange(open: boolean) {
+    if (!open) {
+      router.replace("/marketplace");
+    }
+  }
+
  if (isChatEnabled === null || isChatEnabled === false) {
    return null;
  }

  return (
-    <div className="flex h-full flex-col">
-      {/* Header */}
-      <header className="border-b border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900">
-        <div className="container mx-auto flex items-center justify-between">
-          <h1 className="text-xl font-semibold">Chat</h1>
-          {sessionId && (
-            <div className="flex items-center gap-4">
-              <span className="text-sm text-zinc-600 dark:text-zinc-400">
-                Session: {sessionId.slice(0, 8)}...
-              </span>
-              <button
-                onClick={clearSession}
-                className="text-sm text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100"
-              >
-                New Chat
-              </button>
-            </div>
+    <Drawer.Root
+      open={isOpen}
+      onOpenChange={handleOpenChange}
+      direction="right"
+      modal={false}
+    >
+      <Drawer.Portal>
+        <Drawer.Content
+          className={cn(
+            "fixed right-0 top-0 z-50 flex h-full w-1/2 flex-col border-l border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900",
+            scrollbarStyles,
          )}
-        </div>
-      </header>
+        >
+          {/* Header */}
+          <header className="shrink-0 border-b border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900">
+            <div className="flex items-center justify-between">
+              <Drawer.Title className="text-xl font-semibold">
+                Chat
+              </Drawer.Title>
+              <div className="flex items-center gap-4">
+                {sessionId && (
+                  <>
+                    <span className="text-sm text-zinc-600 dark:text-zinc-400">
+                      Session: {sessionId.slice(0, 8)}...
+                    </span>
+                    <button
+                      onClick={clearSession}
+                      className="text-sm text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100"
+                    >
+                      New Chat
+                    </button>
+                  </>
+                )}
+                <Button
+                  variant="link"
+                  aria-label="Close"
+                  onClick={() => handleOpenChange(false)}
+                  className="!focus-visible:ring-0 p-0"
+                >
+                  <X width="1.5rem" />
+                </Button>
+              </div>
+            </div>
+          </header>

-      {/* Main Content */}
-      <main className="container mx-auto flex flex-1 flex-col overflow-hidden">
-        {/* Loading State - show when explicitly loading/creating OR when we don't have a session yet and no error */}
-        {(isLoading || isCreating || (!sessionId && !error)) && (
-          <ChatLoadingState
-            message={isCreating ? "Creating session..." : "Loading..."}
-          />
-        )}
+          {/* Main Content */}
+          <main className="flex min-h-0 flex-1 flex-col overflow-hidden">
+            {/* Loading State - show when explicitly loading/creating OR when we don't have a session yet and no error */}
+            {(isLoading || isCreating || (!sessionId && !error)) && (
+              <ChatLoadingState
+                message={isCreating ? "Creating session..." : "Loading..."}
+              />
+            )}

-        {/* Error State */}
-        {error && !isLoading && (
-          <ChatErrorState error={error} onRetry={createSession} />
-        )}
+            {/* Error State */}
+            {error && !isLoading && (
+              <ChatErrorState error={error} onRetry={createSession} />
+            )}

-        {/* Session Content */}
-        {sessionId && !isLoading && !error && (
-          <ChatContainer
-            sessionId={sessionId}
-            initialMessages={messages}
-            onRefreshSession={refreshSession}
-            className="flex-1"
-          />
-        )}
-      </main>
-    </div>
+            {/* Session Content */}
+            {sessionId && !isLoading && !error && (
+              <ChatContainer
+                sessionId={sessionId}
+                initialMessages={messages}
+                onRefreshSession={refreshSession}
+                className="flex-1"
+              />
+            )}
+          </main>
+        </Drawer.Content>
+      </Drawer.Portal>
+    </Drawer.Root>
  );
 }
--- a/autogpt_platform/frontend/src/app/(platform)/chat/useChatPage.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/chat/useChatPage.ts
@@ -1,11 +1,11 @@
 "use client";

-import { useEffect, useRef } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
-import { toast } from "sonner";
-import { useChatSession } from "@/app/(platform)/chat/useChatSession";
+import { useChatSession } from "@/components/contextual/Chat/useChatSession";
+import { useChatStream } from "@/components/contextual/Chat/useChatStream";
 import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
-import { useChatStream } from "@/app/(platform)/chat/useChatStream";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useRef } from "react";
+import { toast } from "sonner";

 export function useChatPage() {
  const router = useRouter();
--- a/autogpt_platform/frontend/src/app/(platform)/layout.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/layout.tsx
@@ -1,13 +1,14 @@
 import { Navbar } from "@/components/layout/Navbar/Navbar";
-import { AdminImpersonationBanner } from "./admin/components/AdminImpersonationBanner";
 import { ReactNode } from "react";
+import { AdminImpersonationBanner } from "./admin/components/AdminImpersonationBanner";
+import { PlatformLayoutContent } from "./PlatformLayoutContent";

 export default function PlatformLayout({ children }: { children: ReactNode }) {
  return (
-    <main className="flex h-screen w-full flex-col">
+    <PlatformLayoutContent>
      <Navbar />
      <AdminImpersonationBanner />
-      <section className="flex-1">{children}</section>
-    </main>
+      {children}
+    </PlatformLayoutContent>
  );
 }
--- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/AgentInputsReadOnly/AgentInputsReadOnly.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/AgentInputsReadOnly/AgentInputsReadOnly.tsx
@@ -3,8 +3,8 @@
 import type { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
 import { Text } from "@/components/atoms/Text/Text";
 import type { CredentialsMetaInput } from "@/lib/autogpt-server-api/types";
-import { CredentialsInput } from "../CredentialsInputs/CredentialsInputs";
-import { RunAgentInputs } from "../RunAgentInputs/RunAgentInputs";
+import { CredentialsInput } from "../../../../../../../../../../components/contextual/CredentialsInputs/CredentialsInputs";
+import { RunAgentInputs } from "../../../../../../../../../../components/contextual/RunAgentInputs/RunAgentInputs";
 import { getAgentCredentialsFields, getAgentInputFields } from "./helpers";

 type Props = {
--- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/CredentialsInputs.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/CredentialsInputs.tsx
@@ -143,6 +143,7 @@ export function CredentialsInput({
              size="small"
              onClick={handleActionButtonClick}
              className="w-fit"
+              type="button"
            >
              {actionButtonText}
            </Button>
@@ -155,6 +156,7 @@ export function CredentialsInput({
            size="small"
            onClick={handleActionButtonClick}
            className="w-fit"
+            type="button"
          >
            {actionButtonText}
          </Button>
--- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentModal/components/ModalRunSection/ModalRunSection.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentModal/components/ModalRunSection/ModalRunSection.tsx
@@ -1,7 +1,7 @@
-import { CredentialsInput } from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/CredentialsInputs";
 import { Input } from "@/components/atoms/Input/Input";
+import { CredentialsInput } from "@/components/contextual/CredentialsInputs/CredentialsInputs";
 import { InformationTooltip } from "@/components/molecules/InformationTooltip/InformationTooltip";
-import { RunAgentInputs } from "../../../RunAgentInputs/RunAgentInputs";
+import { RunAgentInputs } from "../../../../../../../../../../../../components/contextual/RunAgentInputs/RunAgentInputs";
 import { useRunAgentModalContext } from "../../context";
 import { ModalSection } from "../ModalSection/ModalSection";
 import { WebhookTriggerBanner } from "../WebhookTriggerBanner/WebhookTriggerBanner";
--- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/SelectedRunView/components/RunOutputs.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/SelectedRunView/components/RunOutputs.tsx
@@ -3,12 +3,12 @@
 import type {
  OutputMetadata,
  OutputRenderer,
-} from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/OutputRenderers";
+} from "@/components/contextual/OutputRenderers";
 import {
  globalRegistry,
  OutputActions,
  OutputItem,
-} from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/OutputRenderers";
+} from "@/components/contextual/OutputRenderers";
 import React, { useMemo } from "react";

 type OutputsRecord = Record<string, Array<unknown>>;
--- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/SelectedTemplateView/SelectedTemplateView.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/SelectedTemplateView/SelectedTemplateView.tsx
@@ -4,12 +4,12 @@ import type { GraphExecutionMeta } from "@/app/api/__generated__/models/graphExe
 import type { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
 import { Input } from "@/components/atoms/Input/Input";
 import { ErrorCard } from "@/components/molecules/ErrorCard/ErrorCard";
+import { CredentialsInput } from "../../../../../../../../../../components/contextual/CredentialsInputs/CredentialsInputs";
+import { RunAgentInputs } from "../../../../../../../../../../components/contextual/RunAgentInputs/RunAgentInputs";
 import {
  getAgentCredentialsFields,
  getAgentInputFields,
 } from "../../modals/AgentInputsReadOnly/helpers";
-import { CredentialsInput } from "../../modals/CredentialsInputs/CredentialsInputs";
-import { RunAgentInputs } from "../../modals/RunAgentInputs/RunAgentInputs";
 import { LoadingSelectedContent } from "../LoadingSelectedContent";
 import { RunDetailCard } from "../RunDetailCard/RunDetailCard";
 import { RunDetailHeader } from "../RunDetailHeader/RunDetailHeader";
--- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/SelectedTriggerView/SelectedTriggerView.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/SelectedTriggerView/SelectedTriggerView.tsx
@@ -3,12 +3,12 @@
 import type { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
 import { Input } from "@/components/atoms/Input/Input";
 import { ErrorCard } from "@/components/molecules/ErrorCard/ErrorCard";
+import { CredentialsInput } from "../../../../../../../../../../components/contextual/CredentialsInputs/CredentialsInputs";
+import { RunAgentInputs } from "../../../../../../../../../../components/contextual/RunAgentInputs/RunAgentInputs";
 import {
  getAgentCredentialsFields,
  getAgentInputFields,
 } from "../../modals/AgentInputsReadOnly/helpers";
-import { CredentialsInput } from "../../modals/CredentialsInputs/CredentialsInputs";
-import { RunAgentInputs } from "../../modals/RunAgentInputs/RunAgentInputs";
 import { LoadingSelectedContent } from "../LoadingSelectedContent";
 import { RunDetailCard } from "../RunDetailCard/RunDetailCard";
 import { RunDetailHeader } from "../RunDetailHeader/RunDetailHeader";
--- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-draft-view.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-draft-view.tsx
@@ -12,8 +12,6 @@ import {
 } from "@/lib/autogpt-server-api";
 import { useBackendAPI } from "@/lib/autogpt-server-api/context";

-import { CredentialsInput } from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/CredentialsInputs";
-import { RunAgentInputs } from "@/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentInputs/RunAgentInputs";
 import { ScheduleTaskDialog } from "@/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/cron-scheduler-dialog";
 import ActionButtonGroup from "@/components/__legacy__/action-button-group";
 import type { ButtonAction } from "@/components/__legacy__/types";
@@ -30,6 +28,8 @@ import {
 } from "@/components/__legacy__/ui/icons";
 import { Input } from "@/components/__legacy__/ui/input";
 import { Button } from "@/components/atoms/Button/Button";
+import { CredentialsInput } from "@/components/contextual/CredentialsInputs/CredentialsInputs";
+import { RunAgentInputs } from "@/components/contextual/RunAgentInputs/RunAgentInputs";
 import { InformationTooltip } from "@/components/molecules/InformationTooltip/InformationTooltip";
 import {
  useToast,
--- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-output-view.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-output-view.tsx
@@ -11,12 +11,12 @@ import {
 } from "@/components/__legacy__/ui/card";

 import LoadingBox from "@/components/__legacy__/ui/loading";
-import type { OutputMetadata } from "../../NewAgentLibraryView/components/selected-views/OutputRenderers";
+import type { OutputMetadata } from "../../../../../../../../components/contextual/OutputRenderers";
 import {
  globalRegistry,
  OutputActions,
  OutputItem,
-} from "../../NewAgentLibraryView/components/selected-views/OutputRenderers";
+} from "../../../../../../../../components/contextual/OutputRenderers";

 export function AgentRunOutputView({
  agentRunOutputs,
--- a/autogpt_platform/frontend/src/app/(platform)/profile/(user)/integrations/page.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/profile/(user)/integrations/page.tsx
@@ -13,7 +13,7 @@ import {
 import { Button } from "@/components/atoms/Button/Button";
 import { Dialog } from "@/components/molecules/Dialog/Dialog";
 import { useToast } from "@/components/molecules/Toast/use-toast";
-import { providerIcons } from "@/components/renderers/input-renderer/fields/CredentialField/helpers";
+import { providerIcons } from "@/components/renderers/InputRenderer/custom/CredentialField/helpers";
 import { CredentialsProviderName } from "@/lib/autogpt-server-api";
 import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
 import { CredentialsProvidersContext } from "@/providers/agent-credentials/credentials-provider";
--- a/autogpt_platform/frontend/src/app/api/chat/sessions/[sessionId]/stream/route.ts
+++ b/autogpt_platform/frontend/src/app/api/chat/sessions/[sessionId]/stream/route.ts
@@ -4,8 +4,91 @@ import { NextRequest } from "next/server";

 /**
 * SSE Proxy for chat streaming.
- * EventSource doesn't support custom headers, so we need a server-side proxy
- * that adds authentication and forwards the SSE stream to the client.
+ * Supports POST with context (page content + URL) in the request body.
+ */
+export async function POST(
+  request: NextRequest,
+  { params }: { params: Promise<{ sessionId: string }> },
+) {
+  const { sessionId } = await params;
+
+  try {
+    const body = await request.json();
+    const { message, is_user_message, context } = body;
+
+    if (!message) {
+      return new Response(
+        JSON.stringify({ error: "Missing message parameter" }),
+        { status: 400, headers: { "Content-Type": "application/json" } },
+      );
+    }
+
+    // Get auth token from server-side session
+    const token = await getServerAuthToken();
+
+    // Build backend URL
+    const backendUrl = environment.getAGPTServerBaseUrl();
+    const streamUrl = new URL(
+      `/api/chat/sessions/${sessionId}/stream`,
+      backendUrl,
+    );
+
+    // Forward request to backend with auth header
+    const headers: Record<string, string> = {
+      "Content-Type": "application/json",
+      Accept: "text/event-stream",
+      "Cache-Control": "no-cache",
+      Connection: "keep-alive",
+    };
+
+    if (token) {
+      headers["Authorization"] = `Bearer ${token}`;
+    }
+
+    const response = await fetch(streamUrl.toString(), {
+      method: "POST",
+      headers,
+      body: JSON.stringify({
+        message,
+        is_user_message: is_user_message ?? true,
+        context: context || null,
+      }),
+    });
+
+    if (!response.ok) {
+      const error = await response.text();
+      return new Response(error, {
+        status: response.status,
+        headers: { "Content-Type": "application/json" },
+      });
+    }
+
+    // Return the SSE stream directly
+    return new Response(response.body, {
+      headers: {
+        "Content-Type": "text/event-stream",
+        "Cache-Control": "no-cache, no-transform",
+        Connection: "keep-alive",
+        "X-Accel-Buffering": "no",
+      },
+    });
+  } catch (error) {
+    console.error("SSE proxy error:", error);
+    return new Response(
+      JSON.stringify({
+        error: "Failed to connect to chat service",
+        detail: error instanceof Error ? error.message : String(error),
+      }),
+      {
+        status: 500,
+        headers: { "Content-Type": "application/json" },
+      },
+    );
+  }
+}
+
+/**
+ * Legacy GET endpoint for backward compatibility
 */
 export async function GET(
  request: NextRequest,
--- a/autogpt_platform/frontend/src/app/globals.css
+++ b/autogpt_platform/frontend/src/app/globals.css
@@ -141,6 +141,52 @@
  }
 }

+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+@keyframes l3 {
+  25% {
+    background-position:
+      0 0,
+      100% 100%,
+      100% calc(100% - 5px);
+  }
+  50% {
+    background-position:
+      0 100%,
+      100% 100%,
+      0 calc(100% - 5px);
+  }
+  75% {
+    background-position:
+      0 100%,
+      100% 0,
+      100% 5px;
+  }
+}
+
+.loader {
+  width: 80px;
+  height: 70px;
+  border: 5px solid rgb(241 245 249);
+  padding: 0 8px;
+  box-sizing: border-box;
+  background:
+    linear-gradient(rgb(15 23 42) 0 0) 0 0/8px 20px,
+    linear-gradient(rgb(15 23 42) 0 0) 100% 0/8px 20px,
+    radial-gradient(farthest-side, rgb(15 23 42) 90%, #0000) 0 5px/8px 8px
+      content-box,
+    transparent;
+  background-repeat: no-repeat;
+  animation: l3 2s infinite linear;
+}
+
 input[type="number"]::-webkit-outer-spin-button,
 input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
--- a/autogpt_platform/frontend/src/components/atoms/Input/Input.tsx
+++ b/autogpt_platform/frontend/src/components/atoms/Input/Input.tsx
@@ -92,7 +92,7 @@ export function Input({
          className={cn(
            baseStyles,
            errorStyles,
-            "-mb-1 h-auto min-h-[2.875rem] rounded-medium",
+            "-mb-1 h-auto min-h-[2.875rem] rounded-full",
            // Size variants for textarea
            size === "small" && [
              "min-h-[2.25rem]", // 36px minimum
@@ -107,6 +107,11 @@ export function Input({
          )}
          placeholder={placeholder || label}
          onChange={handleTextareaChange}
+          onKeyDown={
+            props.onKeyDown as
+              | React.KeyboardEventHandler<HTMLTextAreaElement>
+              | undefined
+          }
          rows={props.rows || 3}
          {...(hideLabel ? { "aria-label": label } : {})}
          id={props.id}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/Chat.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/Chat.tsx
@@ -0,0 +1,136 @@
+"use client";
+
+import { Button } from "@/components/atoms/Button/Button";
+import { Text } from "@/components/atoms/Text/Text";
+import { cn } from "@/lib/utils";
+import { List } from "@phosphor-icons/react";
+import React, { useState } from "react";
+import { ChatContainer } from "./components/ChatContainer/ChatContainer";
+import { ChatErrorState } from "./components/ChatErrorState/ChatErrorState";
+import { ChatLoadingState } from "./components/ChatLoadingState/ChatLoadingState";
+import { SessionsDrawer } from "./components/SessionsDrawer/SessionsDrawer";
+import { useChat } from "./useChat";
+
+export interface ChatProps {
+  className?: string;
+  headerTitle?: React.ReactNode;
+  showHeader?: boolean;
+  showSessionInfo?: boolean;
+  showNewChatButton?: boolean;
+  onNewChat?: () => void;
+  headerActions?: React.ReactNode;
+}
+
+export function Chat({
+  className,
+  headerTitle = "AutoGPT Copilot",
+  showHeader = true,
+  showSessionInfo = true,
+  showNewChatButton = true,
+  onNewChat,
+  headerActions,
+}: ChatProps) {
+  const {
+    messages,
+    isLoading,
+    isCreating,
+    error,
+    sessionId,
+    createSession,
+    clearSession,
+    refreshSession,
+    loadSession,
+  } = useChat();
+
+  const [isSessionsDrawerOpen, setIsSessionsDrawerOpen] = useState(false);
+
+  const handleNewChat = () => {
+    clearSession();
+    onNewChat?.();
+  };
+
+  const handleSelectSession = async (sessionId: string) => {
+    try {
+      await loadSession(sessionId);
+    } catch (err) {
+      console.error("Failed to load session:", err);
+    }
+  };
+
+  return (
+    <div className={cn("flex h-full flex-col", className)}>
+      {/* Header */}
+      {showHeader && (
+        <header className="shrink-0 border-t border-zinc-200 bg-white p-3">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <button
+                aria-label="View sessions"
+                onClick={() => setIsSessionsDrawerOpen(true)}
+                className="flex size-8 items-center justify-center rounded hover:bg-zinc-100"
+              >
+                <List width="1.25rem" height="1.25rem" />
+              </button>
+              {typeof headerTitle === "string" ? (
+                <Text variant="h2" className="text-lg font-semibold">
+                  {headerTitle}
+                </Text>
+              ) : (
+                headerTitle
+              )}
+            </div>
+            <div className="flex items-center gap-3">
+              {showSessionInfo && sessionId && (
+                <>
+                  {showNewChatButton && (
+                    <Button
+                      variant="outline"
+                      size="small"
+                      onClick={handleNewChat}
+                    >
+                      New Chat
+                    </Button>
+                  )}
+                </>
+              )}
+              {headerActions}
+            </div>
+          </div>
+        </header>
+      )}
+
+      {/* Main Content */}
+      <main className="flex min-h-0 flex-1 flex-col overflow-hidden">
+        {/* Loading State - show when explicitly loading/creating OR when we don't have a session yet and no error */}
+        {(isLoading || isCreating || (!sessionId && !error)) && (
+          <ChatLoadingState
+            message={isCreating ? "Creating session..." : "Loading..."}
+          />
+        )}
+
+        {/* Error State */}
+        {error && !isLoading && (
+          <ChatErrorState error={error} onRetry={createSession} />
+        )}
+
+        {/* Session Content */}
+        {sessionId && !isLoading && !error && (
+          <ChatContainer
+            sessionId={sessionId}
+            initialMessages={messages}
+            onRefreshSession={refreshSession}
+            className="flex-1"
+          />
+        )}
+      </main>
+
+      {/* Sessions Drawer */}
+      <SessionsDrawer
+        isOpen={isSessionsDrawerOpen}
+        onClose={() => setIsSessionsDrawerOpen(false)}
+        onSelectSession={handleSelectSession}
+        currentSessionId={sessionId}
+      />
+    </div>
+  );
+}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/ChatDrawer.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/ChatDrawer.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import { scrollbarStyles } from "@/components/styles/scrollbars";
+import { cn } from "@/lib/utils";
+import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
+import { X } from "@phosphor-icons/react";
+import { useEffect, useState } from "react";
+import { Drawer } from "vaul";
+import { Chat } from "./Chat";
+import { useChatDrawer } from "./useChatDrawer";
+
+interface ChatDrawerProps {
+  blurBackground?: boolean;
+}
+
+export function ChatDrawer({ blurBackground = true }: ChatDrawerProps) {
+  const [isMounted, setIsMounted] = useState(false);
+  const isChatEnabled = useGetFlag(Flag.CHAT);
+  const { isOpen, close } = useChatDrawer();
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (isChatEnabled === false && isOpen) {
+      close();
+    }
+  }, [isChatEnabled, isOpen, close]);
+
+  // Don't render on server - vaul drawer accesses document during SSR
+  if (!isMounted || isChatEnabled === null || isChatEnabled === false) {
+    return null;
+  }
+
+  return (
+    <Drawer.Root
+      open={isOpen}
+      onOpenChange={(open) => {
+        if (!open) {
+          close();
+        }
+      }}
+      direction="right"
+      modal={false}
+    >
+      {blurBackground && isOpen && (
+        <div
+          onClick={close}
+          className="fixed inset-0 z-[45] cursor-pointer animate-in fade-in-0"
+          style={{ pointerEvents: "auto" }}
+        />
+      )}
+      <Drawer.Content
+        onClick={(e) => e.stopPropagation()}
+        onInteractOutside={blurBackground ? close : undefined}
+        className={cn(
+          "fixed right-0 top-[60px] z-50 flex h-[calc(100vh-60px)] w-1/2 flex-col border-l border-zinc-200 bg-white",
+          scrollbarStyles,
+        )}
+      >
+        <Chat
+          headerTitle={
+            <Drawer.Title className="text-lg font-semibold">
+              AutoGPT Copilot
+            </Drawer.Title>
+          }
+          headerActions={
+            <button aria-label="Close" onClick={close} className="size-8">
+              <X width="1.25rem" height="1.25rem" />
+            </button>
+          }
+        />
+      </Drawer.Content>
+    </Drawer.Root>
+  );
+}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/AgentCarouselMessage/AgentCarouselMessage.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/AgentCarouselMessage/AgentCarouselMessage.tsx
@@ -0,0 +1,119 @@
+import { Button } from "@/components/atoms/Button/Button";
+import { Card } from "@/components/atoms/Card/Card";
+import { Text } from "@/components/atoms/Text/Text";
+import { cn } from "@/lib/utils";
+import { ArrowRight, List, Robot } from "@phosphor-icons/react";
+import Image from "next/image";
+
+export interface Agent {
+  id: string;
+  name: string;
+  description: string;
+  version?: number;
+  image_url?: string;
+}
+
+export interface AgentCarouselMessageProps {
+  agents: Agent[];
+  totalCount?: number;
+  onSelectAgent?: (agentId: string) => void;
+  className?: string;
+}
+
+export function AgentCarouselMessage({
+  agents,
+  totalCount,
+  onSelectAgent,
+  className,
+}: AgentCarouselMessageProps) {
+  const displayCount = totalCount ?? agents.length;
+
+  return (
+    <div
+      className={cn(
+        "mx-4 my-2 flex flex-col gap-4 rounded-lg border border-purple-200 bg-purple-50 p-6",
+        className,
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-center gap-3">
+        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-purple-500">
+          <List size={24} weight="bold" className="text-white" />
+        </div>
+        <div>
+          <Text variant="h3" className="text-purple-900">
+            Found {displayCount} {displayCount === 1 ? "Agent" : "Agents"}
+          </Text>
+          <Text variant="small" className="text-purple-700">
+            Select an agent to view details or run it
+          </Text>
+        </div>
+      </div>
+
+      {/* Agent Cards */}
+      <div className="grid gap-3 sm:grid-cols-2">
+        {agents.map((agent) => (
+          <Card
+            key={agent.id}
+            className="border border-purple-200 bg-white p-4"
+          >
+            <div className="flex gap-3">
+              <div className="relative h-10 w-10 flex-shrink-0 overflow-hidden rounded-lg bg-purple-100">
+                {agent.image_url ? (
+                  <Image
+                    src={agent.image_url}
+                    alt={`${agent.name} preview image`}
+                    fill
+                    className="object-cover"
+                  />
+                ) : (
+                  <div className="flex h-full w-full items-center justify-center">
+                    <Robot
+                      size={20}
+                      weight="bold"
+                      className="text-purple-600"
+                    />
+                  </div>
+                )}
+              </div>
+              <div className="flex-1 space-y-2">
+                <div>
+                  <Text
+                    variant="body"
+                    className="font-semibold text-purple-900"
+                  >
+                    {agent.name}
+                  </Text>
+                  {agent.version && (
+                    <Text variant="small" className="text-purple-600">
+                      v{agent.version}
+                    </Text>
+                  )}
+                </div>
+                <Text variant="small" className="line-clamp-2 text-purple-700">
+                  {agent.description}
+                </Text>
+                {onSelectAgent && (
+                  <Button
+                    onClick={() => onSelectAgent(agent.id)}
+                    variant="ghost"
+                    className="mt-2 flex items-center gap-1 p-0 text-sm text-purple-600 hover:text-purple-800"
+                  >
+                    View details
+                    <ArrowRight size={16} weight="bold" />
+                  </Button>
+                )}
+              </div>
+            </div>
+          </Card>
+        ))}
+      </div>
+
+      {totalCount && totalCount > agents.length && (
+        <Text variant="small" className="text-center text-purple-600">
+          Showing {agents.length} of {totalCount} results
+        </Text>
+      )}
+    </div>
+  );
+}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/AgentInputsSetup/AgentInputsSetup.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/AgentInputsSetup/AgentInputsSetup.tsx
@@ -0,0 +1,145 @@
+"use client";
+
+import { Button } from "@/components/atoms/Button/Button";
+import { Card } from "@/components/atoms/Card/Card";
+import { Text } from "@/components/atoms/Text/Text";
+import { CredentialsInput } from "@/components/contextual/CredentialsInputs/CredentialsInputs";
+import { RunAgentInputs } from "@/components/contextual/RunAgentInputs/RunAgentInputs";
+import type {
+  BlockIOCredentialsSubSchema,
+  BlockIOSubSchema,
+} from "@/lib/autogpt-server-api/types";
+import { cn } from "@/lib/utils";
+import { PlayIcon, WarningIcon } from "@phosphor-icons/react";
+import { useMemo } from "react";
+import { useAgentInputsSetup } from "./useAgentInputsSetup";
+
+interface Props {
+  agentName?: string;
+  inputSchema: Record<string, BlockIOSubSchema>;
+  credentialsSchema?: Record<string, BlockIOCredentialsSubSchema>;
+  message: string;
+  onRun: (
+    inputs: Record<string, any>,
+    credentials: Record<string, any>,
+  ) => void;
+  onCancel?: () => void;
+  className?: string;
+}
+
+export function AgentInputsSetup({
+  agentName,
+  inputSchema,
+  credentialsSchema,
+  message,
+  onRun,
+  onCancel,
+  className,
+}: Props) {
+  const { inputValues, setInputValue, credentialsValues, setCredentialsValue } =
+    useAgentInputsSetup();
+
+  const inputFields = Object.entries(inputSchema || {});
+  const credentialFields = Object.entries(credentialsSchema || {});
+
+  const allRequiredInputsAreSet = useMemo(() => {
+    const requiredFields = Object.entries(inputSchema || {}).filter(
+      ([_, schema]) => !schema.hidden,
+    );
+    return requiredFields.every(([key]) => {
+      const value = inputValues[key];
+      return value !== undefined && value !== null && value !== "";
+    });
+  }, [inputSchema, inputValues]);
+
+  const allCredentialsAreSet = useMemo(() => {
+    if (!credentialsSchema || Object.keys(credentialsSchema).length === 0) {
+      return true;
+    }
+    return Object.keys(credentialsSchema).every(
+      (key) => credentialsValues[key] !== undefined,
+    );
+  }, [credentialsSchema, credentialsValues]);
+
+  const canRun = allRequiredInputsAreSet && allCredentialsAreSet;
+
+  function handleRun() {
+    if (canRun) {
+      onRun(inputValues, credentialsValues);
+    }
+  }
+
+  return (
+    <Card
+      className={cn(
+        "mx-4 my-2 overflow-hidden border-blue-200 bg-blue-50",
+        className,
+      )}
+    >
+      <div className="flex items-start gap-4 p-6">
+        <div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-500">
+          <WarningIcon size={24} weight="bold" className="text-white" />
+        </div>
+        <div className="flex-1">
+          <Text variant="h3" className="mb-2 text-blue-900">
+            {agentName ? `Configure ${agentName}` : "Agent Configuration"}
+          </Text>
+          <Text variant="body" className="mb-4 text-blue-700">
+            {message}
+          </Text>
+
+          {inputFields.length > 0 && (
+            <div className="mb-4 space-y-4">
+              {inputFields.map(([key, schema]) => {
+                if (schema.hidden) return null;
+                const defaultValue = (schema as any).default;
+                return (
+                  <RunAgentInputs
+                    key={key}
+                    schema={schema}
+                    value={inputValues[key] ?? defaultValue}
+                    placeholder={schema.description}
+                    onChange={(value) => setInputValue(key, value)}
+                  />
+                );
+              })}
+            </div>
+          )}
+
+          {credentialFields.length > 0 && (
+            <div className="mb-4 space-y-4">
+              {credentialFields.map(([key, schema]) => (
+                <CredentialsInput
+                  key={key}
+                  schema={schema}
+                  selectedCredentials={credentialsValues[key]}
+                  onSelectCredentials={(value) =>
+                    setCredentialsValue(key, value)
+                  }
+                  siblingInputs={inputValues}
+                />
+              ))}
+            </div>
+          )}
+
+          <div className="flex gap-2">
+            <Button
+              variant="primary"
+              size="small"
+              onClick={handleRun}
+              disabled={!canRun}
+            >
+              <PlayIcon className="mr-2 h-4 w-4" weight="bold" />
+              Run Agent
+            </Button>
+            {onCancel && (
+              <Button variant="outline" size="small" onClick={onCancel}>
+                Cancel
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/AgentInputsSetup/useAgentInputsSetup.ts
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/AgentInputsSetup/useAgentInputsSetup.ts
@@ -0,0 +1,38 @@
+import type { CredentialsMetaInput } from "@/lib/autogpt-server-api/types";
+import { useState } from "react";
+
+export function useAgentInputsSetup() {
+  const [inputValues, setInputValues] = useState<Record<string, any>>({});
+  const [credentialsValues, setCredentialsValues] = useState<
+    Record<string, CredentialsMetaInput>
+  >({});
+
+  function setInputValue(key: string, value: any) {
+    setInputValues((prev) => ({
+      ...prev,
+      [key]: value,
+    }));
+  }
+
+  function setCredentialsValue(key: string, value?: CredentialsMetaInput) {
+    if (value) {
+      setCredentialsValues((prev) => ({
+        ...prev,
+        [key]: value,
+      }));
+    } else {
+      setCredentialsValues((prev) => {
+        const next = { ...prev };
+        delete next[key];
+        return next;
+      });
+    }
+  }
+
+  return {
+    inputValues,
+    setInputValue,
+    credentialsValues,
+    setCredentialsValue,
+  };
+}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/AuthPromptWidget/AuthPromptWidget.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/AuthPromptWidget/AuthPromptWidget.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import { Button } from "@/components/atoms/Button/Button";
+import { cn } from "@/lib/utils";
+import { ShieldIcon, SignInIcon, UserPlusIcon } from "@phosphor-icons/react";
+import { useRouter } from "next/navigation";
+
+export interface AuthPromptWidgetProps {
+  message: string;
+  sessionId: string;
+  agentInfo?: {
+    graph_id: string;
+    name: string;
+    trigger_type: string;
+  };
+  returnUrl?: string;
+  className?: string;
+}
+
+export function AuthPromptWidget({
+  message,
+  sessionId,
+  agentInfo,
+  returnUrl = "/chat",
+  className,
+}: AuthPromptWidgetProps) {
+  const router = useRouter();
+
+  function handleSignIn() {
+    if (typeof window !== "undefined") {
+      localStorage.setItem("pending_chat_session", sessionId);
+      if (agentInfo) {
+        localStorage.setItem("pending_agent_setup", JSON.stringify(agentInfo));
+      }
+    }
+    const returnUrlWithSession = `${returnUrl}?session_id=${sessionId}`;
+    const encodedReturnUrl = encodeURIComponent(returnUrlWithSession);
+    router.push(`/login?returnUrl=${encodedReturnUrl}`);
+  }
+
+  function handleSignUp() {
+    if (typeof window !== "undefined") {
+      localStorage.setItem("pending_chat_session", sessionId);
+      if (agentInfo) {
+        localStorage.setItem("pending_agent_setup", JSON.stringify(agentInfo));
+      }
+    }
+    const returnUrlWithSession = `${returnUrl}?session_id=${sessionId}`;
+    const encodedReturnUrl = encodeURIComponent(returnUrlWithSession);
+    router.push(`/signup?returnUrl=${encodedReturnUrl}`);
+  }
+
+  return (
+    <div
+      className={cn(
+        "my-4 overflow-hidden rounded-lg border border-violet-200",
+        "bg-gradient-to-br from-violet-50 to-purple-50",
+        "duration-500 animate-in fade-in-50 slide-in-from-bottom-2",
+        className,
+      )}
+    >
+      <div className="px-6 py-5">
+        <div className="mb-4 flex items-center gap-3">
+          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-violet-600">
+            <ShieldIcon size={20} weight="fill" className="text-white" />
+          </div>
+          <div>
+            <h3 className="text-lg font-semibold text-neutral-900">
+              Authentication Required
+            </h3>
+            <p className="text-sm text-neutral-600">
+              Sign in to set up and manage agents
+            </p>
+          </div>
+        </div>
+
+        <div className="mb-5 rounded-md bg-white/50 p-4">
+          <p className="text-sm text-neutral-700">{message}</p>
+          {agentInfo && (
+            <div className="mt-3 text-xs text-neutral-600">
+              <p>
+                Ready to set up:{" "}
+                <span className="font-medium">{agentInfo.name}</span>
+              </p>
+              <p>
+                Type:{" "}
+                <span className="font-medium">{agentInfo.trigger_type}</span>
+              </p>
+            </div>
+          )}
+        </div>
+
+        <div className="flex gap-3">
+          <Button
+            onClick={handleSignIn}
+            variant="primary"
+            size="small"
+            className="flex-1"
+          >
+            <SignInIcon size={16} weight="bold" className="mr-2" />
+            Sign In
+          </Button>
+          <Button
+            onClick={handleSignUp}
+            variant="secondary"
+            size="small"
+            className="flex-1"
+          >
+            <UserPlusIcon size={16} weight="bold" className="mr-2" />
+            Create Account
+          </Button>
+        </div>
+
+        <div className="mt-4 text-center text-xs text-neutral-500">
+          Your chat session will be preserved after signing in
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatContainer/ChatContainer.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatContainer/ChatContainer.tsx
@@ -0,0 +1,89 @@
+import type { SessionDetailResponse } from "@/app/api/__generated__/models/sessionDetailResponse";
+import { cn } from "@/lib/utils";
+import { useCallback } from "react";
+import { usePageContext } from "../../usePageContext";
+import { ChatInput } from "../ChatInput/ChatInput";
+import { MessageList } from "../MessageList/MessageList";
+import { QuickActionsWelcome } from "../QuickActionsWelcome/QuickActionsWelcome";
+import { useChatContainer } from "./useChatContainer";
+
+export interface ChatContainerProps {
+  sessionId: string | null;
+  initialMessages: SessionDetailResponse["messages"];
+  onRefreshSession: () => Promise<void>;
+  className?: string;
+}
+
+export function ChatContainer({
+  sessionId,
+  initialMessages,
+  onRefreshSession,
+  className,
+}: ChatContainerProps) {
+  const { messages, streamingChunks, isStreaming, sendMessage } =
+    useChatContainer({
+      sessionId,
+      initialMessages,
+      onRefreshSession,
+    });
+  const { capturePageContext } = usePageContext();
+
+  // Wrap sendMessage to automatically capture page context
+  const sendMessageWithContext = useCallback(
+    async (content: string, isUserMessage: boolean = true) => {
+      const context = capturePageContext();
+      await sendMessage(content, isUserMessage, context);
+    },
+    [sendMessage, capturePageContext],
+  );
+
+  const quickActions = [
+    "Find agents for social media management",
+    "Show me agents for content creation",
+    "Help me automate my business",
+    "What can you help me with?",
+  ];
+
+  return (
+    <div
+      className={cn("flex h-full flex-col", className)}
+      style={{
+        backgroundColor: "#ffffff",
+        backgroundImage:
+          "radial-gradient(#e5e5e5 0.5px, transparent 0.5px), radial-gradient(#e5e5e5 0.5px, #ffffff 0.5px)",
+        backgroundSize: "20px 20px",
+        backgroundPosition: "0 0, 10px 10px",
+      }}
+    >
+      {/* Messages or Welcome Screen */}
+      {messages.length === 0 ? (
+        <QuickActionsWelcome
+          title="Welcome to AutoGPT Copilot"
+          description="Start a conversation to discover and run AI agents."
+          actions={quickActions}
+          onActionClick={sendMessageWithContext}
+          disabled={isStreaming || !sessionId}
+        />
+      ) : (
+        <MessageList
+          messages={messages}
+          streamingChunks={streamingChunks}
+          isStreaming={isStreaming}
+          onSendMessage={sendMessageWithContext}
+          className="flex-1"
+        />
+      )}
+
+      {/* Input - Always visible */}
+      <div className="border-t border-zinc-200 p-4">
+        <ChatInput
+          onSend={sendMessageWithContext}
+          disabled={isStreaming || !sessionId}
+          placeholder={
+            sessionId ? "Type your message..." : "Creating session..."
+          }
+        />
+      </div>
+    </div>
+  );
+}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatContainer/createStreamEventDispatcher.ts
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatContainer/createStreamEventDispatcher.ts
@@ -0,0 +1,60 @@
+import type { StreamChunk } from "@/components/contextual/Chat/useChatStream";
+import { toast } from "sonner";
+import type { HandlerDependencies } from "./useChatContainer.handlers";
+import {
+  handleError,
+  handleLoginNeeded,
+  handleStreamEnd,
+  handleTextChunk,
+  handleTextEnded,
+  handleToolCallStart,
+  handleToolResponse,
+} from "./useChatContainer.handlers";
+
+export function createStreamEventDispatcher(
+  deps: HandlerDependencies,
+): (chunk: StreamChunk) => void {
+  return function dispatchStreamEvent(chunk: StreamChunk): void {
+    switch (chunk.type) {
+      case "text_chunk":
+        handleTextChunk(chunk, deps);
+        break;
+
+      case "text_ended":
+        handleTextEnded(chunk, deps);
+        break;
+
+      case "tool_call_start":
+        handleToolCallStart(chunk, deps);
+        break;
+
+      case "tool_response":
+        handleToolResponse(chunk, deps);
+        break;
+
+      case "login_needed":
+      case "need_login":
+        handleLoginNeeded(chunk, deps);
+        break;
+
+      case "stream_end":
+        handleStreamEnd(chunk, deps);
+        break;
+
+      case "error":
+        handleError(chunk, deps);
+        // Show toast at dispatcher level to avoid circular dependencies
+        toast.error("Chat Error", {
+          description: chunk.message || chunk.content || "An error occurred",
+        });
+        break;
+
+      case "usage":
+        // TODO: Handle usage for display
+        break;
+
+      default:
+        console.warn("Unknown stream chunk type:", chunk);
+    }
+  };
+}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatContainer/helpers.ts
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatContainer/helpers.ts
@@ -0,0 +1,379 @@
+import type { ToolResult } from "@/types/chat";
+import type { ChatMessageData } from "../ChatMessage/useChatMessage";
+
+export function removePageContext(content: string): string {
+  // Remove "Page URL: ..." pattern (case insensitive, handles various formats)
+  let cleaned = content.replace(/Page URL:\s*[^\n\r]*/gi, "");
+
+  // Find "User Message:" marker to preserve the actual user message
+  const userMessageMatch = cleaned.match(/User Message:\s*([\s\S]*)$/i);
+  if (userMessageMatch) {
+    // If we found "User Message:", extract everything after it
+    cleaned = userMessageMatch[1];
+  } else {
+    // If no "User Message:" marker, remove "Page Content:" and everything after it
+    cleaned = cleaned.replace(/Page Content:[\s\S]*$/gi, "");
+  }
+
+  // Clean up extra whitespace and newlines
+  cleaned = cleaned.replace(/\n\s*\n\s*\n+/g, "\n\n").trim();
+  return cleaned;
+}
+
+export function createUserMessage(content: string): ChatMessageData {
+  return {
+    type: "message",
+    role: "user",
+    content,
+    timestamp: new Date(),
+  };
+}
+
+export function filterAuthMessages(
+  messages: ChatMessageData[],
+): ChatMessageData[] {
+  return messages.filter(
+    (msg) => msg.type !== "credentials_needed" && msg.type !== "login_needed",
+  );
+}
+
+export function isValidMessage(msg: unknown): msg is Record<string, unknown> {
+  if (typeof msg !== "object" || msg === null) {
+    return false;
+  }
+  const m = msg as Record<string, unknown>;
+  if (typeof m.role !== "string") {
+    return false;
+  }
+  if (m.content !== undefined && typeof m.content !== "string") {
+    return false;
+  }
+  return true;
+}
+
+export function isToolCallArray(value: unknown): value is Array<{
+  id: string;
+  type: string;
+  function: { name: string; arguments: string };
+}> {
+  if (!Array.isArray(value)) {
+    return false;
+  }
+  return value.every(
+    (item) =>
+      typeof item === "object" &&
+      item !== null &&
+      "id" in item &&
+      typeof item.id === "string" &&
+      "type" in item &&
+      typeof item.type === "string" &&
+      "function" in item &&
+      typeof item.function === "object" &&
+      item.function !== null &&
+      "name" in item.function &&
+      typeof item.function.name === "string" &&
+      "arguments" in item.function &&
+      typeof item.function.arguments === "string",
+  );
+}
+
+export function isAgentArray(value: unknown): value is Array<{
+  id: string;
+  name: string;
+  description: string;
+  version?: number;
+  image_url?: string;
+}> {
+  if (!Array.isArray(value)) {
+    return false;
+  }
+  return value.every(
+    (item) =>
+      typeof item === "object" &&
+      item !== null &&
+      "id" in item &&
+      typeof item.id === "string" &&
+      "name" in item &&
+      typeof item.name === "string" &&
+      "description" in item &&
+      typeof item.description === "string" &&
+      (!("version" in item) || typeof item.version === "number") &&
+      (!("image_url" in item) || typeof item.image_url === "string"),
+  );
+}
+
+export function extractJsonFromErrorMessage(
+  message: string,
+): Record<string, unknown> | null {
+  try {
+    const start = message.indexOf("{");
+    if (start === -1) {
+      return null;
+    }
+    let depth = 0;
+    let end = -1;
+    for (let i = start; i < message.length; i++) {
+      const ch = message[i];
+      if (ch === "{") {
+        depth++;
+      } else if (ch === "}") {
+        depth--;
+        if (depth === 0) {
+          end = i;
+          break;
+        }
+      }
+    }
+    if (end === -1) {
+      return null;
+    }
+    const jsonStr = message.slice(start, end + 1);
+    return JSON.parse(jsonStr) as Record<string, unknown>;
+  } catch {
+    return null;
+  }
+}
+
+export function parseToolResponse(
+  result: ToolResult,
+  toolId: string,
+  toolName: string,
+  timestamp?: Date,
+): ChatMessageData | null {
+  let parsedResult: Record<string, unknown> | null = null;
+  try {
+    parsedResult =
+      typeof result === "string"
+        ? JSON.parse(result)
+        : (result as Record<string, unknown>);
+  } catch {
+    parsedResult = null;
+  }
+  if (parsedResult && typeof parsedResult === "object") {
+    const responseType = parsedResult.type as string | undefined;
+    if (responseType === "no_results") {
+      return {
+        type: "tool_response",
+        toolId,
+        toolName,
+        result: (parsedResult.message as string) || "No results found",
+        success: true,
+        timestamp: timestamp || new Date(),
+      };
+    }
+    if (responseType === "agent_carousel") {
+      const agentsData = parsedResult.agents;
+      if (isAgentArray(agentsData)) {
+        return {
+          type: "agent_carousel",
+          toolName: "agent_carousel",
+          agents: agentsData,
+          totalCount: parsedResult.total_count as number | undefined,
+          timestamp: timestamp || new Date(),
+        };
+      } else {
+        console.warn("Invalid agents array in agent_carousel response");
+      }
+    }
+    if (responseType === "execution_started") {
+      return {
+        type: "execution_started",
+        toolName: "execution_started",
+        executionId: (parsedResult.execution_id as string) || "",
+        agentName: (parsedResult.graph_name as string) || undefined,
+        message: parsedResult.message as string | undefined,
+        libraryAgentLink: parsedResult.library_agent_link as string | undefined,
+        timestamp: timestamp || new Date(),
+      };
+    }
+    if (responseType === "need_login") {
+      return {
+        type: "login_needed",
+        toolName: "login_needed",
+        message:
+          (parsedResult.message as string) ||
+          "Please sign in to use chat and agent features",
+        sessionId: (parsedResult.session_id as string) || "",
+        agentInfo: parsedResult.agent_info as
+          | {
+              graph_id: string;
+              name: string;
+              trigger_type: string;
+            }
+          | undefined,
+        timestamp: timestamp || new Date(),
+      };
+    }
+    if (responseType === "setup_requirements") {
+      return null;
+    }
+  }
+  return {
+    type: "tool_response",
+    toolId,
+    toolName,
+    result,
+    success: true,
+    timestamp: timestamp || new Date(),
+  };
+}
+
+export function isUserReadiness(
+  value: unknown,
+): value is { missing_credentials?: Record<string, unknown> } {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    (!("missing_credentials" in value) ||
+      typeof (value as any).missing_credentials === "object")
+  );
+}
+
+export function isMissingCredentials(
+  value: unknown,
+): value is Record<string, Record<string, unknown>> {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  return Object.values(value).every((v) => typeof v === "object" && v !== null);
+}
+
+export function isSetupInfo(value: unknown): value is {
+  user_readiness?: Record<string, unknown>;
+  agent_name?: string;
+} {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    (!("user_readiness" in value) ||
+      typeof (value as any).user_readiness === "object") &&
+    (!("agent_name" in value) || typeof (value as any).agent_name === "string")
+  );
+}
+
+export function extractCredentialsNeeded(
+  parsedResult: Record<string, unknown>,
+  toolName: string = "run_agent",
+): ChatMessageData | null {
+  try {
+    const setupInfo = parsedResult?.setup_info as
+      | Record<string, unknown>
+      | undefined;
+    const userReadiness = setupInfo?.user_readiness as
+      | Record<string, unknown>
+      | undefined;
+    const missingCreds = userReadiness?.missing_credentials as
+      | Record<string, Record<string, unknown>>
+      | undefined;
+    if (missingCreds && Object.keys(missingCreds).length > 0) {
+      const agentName = (setupInfo?.agent_name as string) || "this block";
+      const credentials = Object.values(missingCreds).map((credInfo) => ({
+        provider: (credInfo.provider as string) || "unknown",
+        providerName:
+          (credInfo.provider_name as string) ||
+          (credInfo.provider as string) ||
+          "Unknown Provider",
+        credentialType:
+          (credInfo.type as
+            | "api_key"
+            | "oauth2"
+            | "user_password"
+            | "host_scoped") || "api_key",
+        title:
+          (credInfo.title as string) ||
+          `${(credInfo.provider_name as string) || (credInfo.provider as string)} credentials`,
+        scopes: credInfo.scopes as string[] | undefined,
+      }));
+      return {
+        type: "credentials_needed",
+        toolName,
+        credentials,
+        message: `To run ${agentName}, you need to add ${credentials.length === 1 ? "credentials" : `${credentials.length} credentials`}.`,
+        agentName,
+        timestamp: new Date(),
+      };
+    }
+    return null;
+  } catch (err) {
+    console.error("Failed to extract credentials from setup info:", err);
+    return null;
+  }
+}
+
+export function extractInputsNeeded(
+  parsedResult: Record<string, unknown>,
+  toolName: string = "run_agent",
+): ChatMessageData | null {
+  try {
+    const setupInfo = parsedResult?.setup_info as
+      | Record<string, unknown>
+      | undefined;
+    const requirements = setupInfo?.requirements as
+      | Record<string, unknown>
+      | undefined;
+    const inputs = requirements?.inputs as
+      | Array<Record<string, unknown>>
+      | undefined;
+    const credentials = requirements?.credentials as
+      | Array<Record<string, unknown>>
+      | undefined;
+
+    if (!inputs || inputs.length === 0) {
+      return null;
+    }
+
+    const agentName = (setupInfo?.agent_name as string) || "this agent";
+    const agentId = parsedResult?.graph_id as string | undefined;
+    const graphVersion = parsedResult?.graph_version as number | undefined;
+
+    const inputSchema: Record<string, any> = {};
+    inputs.forEach((input) => {
+      const name = input.name as string;
+      if (name) {
+        inputSchema[name] = {
+          title: input.name as string,
+          description: (input.description as string) || "",
+          type: (input.type as string) || "string",
+          default: input.default,
+          required: (input.required as boolean) || false,
+          enum: input.options,
+          format: input.format,
+        };
+      }
+    });
+
+    const credentialsSchema: Record<string, any> = {};
+    if (credentials && credentials.length > 0) {
+      credentials.forEach((cred) => {
+        const id = cred.id as string;
+        if (id) {
+          credentialsSchema[id] = {
+            type: "object",
+            properties: {},
+            credentials_provider: [cred.provider as string],
+            credentials_types: [(cred.type as string) || "api_key"],
+            credentials_scopes: cred.scopes as string[] | undefined,
+          };
+        }
+      });
+    }
+
+    return {
+      type: "inputs_needed",
+      toolName,
+      agentName,
+      agentId,
+      graphVersion,
+      inputSchema,
+      credentialsSchema:
+        Object.keys(credentialsSchema).length > 0
+          ? credentialsSchema
+          : undefined,
+      message: `Please provide the required inputs to run ${agentName}.`,
+      timestamp: new Date(),
+    };
+  } catch (err) {
+    console.error("Failed to extract inputs from setup info:", err);
+    return null;
+  }
+}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatContainer/useChatContainer.handlers.ts
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatContainer/useChatContainer.handlers.ts
@@ -0,0 +1,224 @@
+import type { StreamChunk } from "@/components/contextual/Chat/useChatStream";
+import type { Dispatch, MutableRefObject, SetStateAction } from "react";
+import type { ChatMessageData } from "../ChatMessage/useChatMessage";
+import {
+  extractCredentialsNeeded,
+  extractInputsNeeded,
+  parseToolResponse,
+} from "./helpers";
+
+export interface HandlerDependencies {
+  setHasTextChunks: Dispatch<SetStateAction<boolean>>;
+  setStreamingChunks: Dispatch<SetStateAction<string[]>>;
+  streamingChunksRef: MutableRefObject<string[]>;
+  setMessages: Dispatch<SetStateAction<ChatMessageData[]>>;
+  setIsStreamingInitiated: Dispatch<SetStateAction<boolean>>;
+  sessionId: string;
+}
+
+export function handleTextChunk(chunk: StreamChunk, deps: HandlerDependencies) {
+  if (!chunk.content) return;
+  deps.setHasTextChunks(true);
+  deps.setStreamingChunks((prev) => {
+    const updated = [...prev, chunk.content!];
+    deps.streamingChunksRef.current = updated;
+    return updated;
+  });
+}
+
+export function handleTextEnded(
+  _chunk: StreamChunk,
+  deps: HandlerDependencies,
+) {
+  console.log("[Text Ended] Saving streamed text as assistant message");
+  const completedText = deps.streamingChunksRef.current.join("");
+  if (completedText.trim()) {
+    const assistantMessage: ChatMessageData = {
+      type: "message",
+      role: "assistant",
+      content: completedText,
+      timestamp: new Date(),
+    };
+    deps.setMessages((prev) => [...prev, assistantMessage]);
+  }
+  deps.setStreamingChunks([]);
+  deps.streamingChunksRef.current = [];
+  deps.setHasTextChunks(false);
+  deps.setIsStreamingInitiated(false);
+}
+
+export function handleToolCallStart(
+  chunk: StreamChunk,
+  deps: HandlerDependencies,
+) {
+  const toolCallMessage: ChatMessageData = {
+    type: "tool_call",
+    toolId: chunk.tool_id || `tool-${Date.now()}-${chunk.idx || 0}`,
+    toolName: chunk.tool_name || "Executing...",
+    arguments: chunk.arguments || {},
+    timestamp: new Date(),
+  };
+  deps.setMessages((prev) => [...prev, toolCallMessage]);
+  console.log("[Tool Call Start]", {
+    toolId: toolCallMessage.toolId,
+    toolName: toolCallMessage.toolName,
+    timestamp: new Date().toISOString(),
+  });
+}
+
+export function handleToolResponse(
+  chunk: StreamChunk,
+  deps: HandlerDependencies,
+) {
+  console.log("[Tool Response] Received:", {
+    toolId: chunk.tool_id,
+    toolName: chunk.tool_name,
+    timestamp: new Date().toISOString(),
+  });
+  let toolName = chunk.tool_name || "unknown";
+  if (!chunk.tool_name || chunk.tool_name === "unknown") {
+    deps.setMessages((prev) => {
+      const matchingToolCall = [...prev]
+        .reverse()
+        .find(
+          (msg) => msg.type === "tool_call" && msg.toolId === chunk.tool_id,
+        );
+      if (matchingToolCall && matchingToolCall.type === "tool_call") {
+        toolName = matchingToolCall.toolName;
+      }
+      return prev;
+    });
+  }
+  const responseMessage = parseToolResponse(
+    chunk.result!,
+    chunk.tool_id!,
+    toolName,
+    new Date(),
+  );
+  if (!responseMessage) {
+    let parsedResult: Record<string, unknown> | null = null;
+    try {
+      parsedResult =
+        typeof chunk.result === "string"
+          ? JSON.parse(chunk.result)
+          : (chunk.result as Record<string, unknown>);
+    } catch {
+      parsedResult = null;
+    }
+    if (
+      (chunk.tool_name === "run_agent" || chunk.tool_name === "run_block") &&
+      chunk.success &&
+      parsedResult?.type === "setup_requirements"
+    ) {
+      const inputsMessage = extractInputsNeeded(parsedResult, chunk.tool_name);
+      if (inputsMessage) {
+        deps.setMessages((prev) => [...prev, inputsMessage]);
+      }
+      const credentialsMessage = extractCredentialsNeeded(
+        parsedResult,
+        chunk.tool_name,
+      );
+      if (credentialsMessage) {
+        deps.setMessages((prev) => [...prev, credentialsMessage]);
+      }
+    }
+    return;
+  }
+  deps.setMessages((prev) => {
+    const toolCallIndex = prev.findIndex(
+      (msg) => msg.type === "tool_call" && msg.toolId === chunk.tool_id,
+    );
+    if (toolCallIndex !== -1) {
+      const newMessages = [...prev];
+      newMessages[toolCallIndex] = responseMessage;
+      console.log(
+        "[Tool Response] Replaced tool_call with matching tool_id:",
+        chunk.tool_id,
+        "at index:",
+        toolCallIndex,
+      );
+      return newMessages;
+    }
+    console.warn(
+      "[Tool Response] No tool_call found with tool_id:",
+      chunk.tool_id,
+      "appending instead",
+    );
+    return [...prev, responseMessage];
+  });
+}
+
+export function handleLoginNeeded(
+  chunk: StreamChunk,
+  deps: HandlerDependencies,
+) {
+  const loginNeededMessage: ChatMessageData = {
+    type: "login_needed",
+    toolName: "login_needed",
+    message: chunk.message || "Please sign in to use chat and agent features",
+    sessionId: chunk.session_id || deps.sessionId,
+    agentInfo: chunk.agent_info,
+    timestamp: new Date(),
+  };
+  deps.setMessages((prev) => [...prev, loginNeededMessage]);
+}
+
+export function handleStreamEnd(
+  _chunk: StreamChunk,
+  deps: HandlerDependencies,
+) {
+  const completedContent = deps.streamingChunksRef.current.join("");
+  // Only save message if there are uncommitted chunks
+  // (text_ended already saved if there were tool calls)
+  if (completedContent.trim()) {
+    console.log(
+      "[Stream End] Saving remaining streamed text as assistant message",
+    );
+    const assistantMessage: ChatMessageData = {
+      type: "message",
+      role: "assistant",
+      content: completedContent,
+      timestamp: new Date(),
+    };
+    deps.setMessages((prev) => {
+      const updated = [...prev, assistantMessage];
+      console.log("[Stream End] Final state:", {
+        localMessages: updated.map((m) => ({
+          type: m.type,
+          ...(m.type === "message" && {
+            role: m.role,
+            contentLength: m.content.length,
+          }),
+          ...(m.type === "tool_call" && {
+            toolId: m.toolId,
+            toolName: m.toolName,
+          }),
+          ...(m.type === "tool_response" && {
+            toolId: m.toolId,
+            toolName: m.toolName,
+            success: m.success,
+          }),
+        })),
+        streamingChunks: deps.streamingChunksRef.current,
+        timestamp: new Date().toISOString(),
+      });
+      return updated;
+    });
+  } else {
+    console.log("[Stream End] No uncommitted chunks, message already saved");
+  }
+  deps.setStreamingChunks([]);
+  deps.streamingChunksRef.current = [];
+  deps.setHasTextChunks(false);
+  deps.setIsStreamingInitiated(false);
+  console.log("[Stream End] Stream complete, messages in local state");
+}
+
+export function handleError(chunk: StreamChunk, deps: HandlerDependencies) {
+  const errorMessage = chunk.message || chunk.content || "An error occurred";
+  console.error("Stream error:", errorMessage);
+  deps.setIsStreamingInitiated(false);
+  deps.setHasTextChunks(false);
+  deps.setStreamingChunks([]);
+  deps.streamingChunksRef.current = [];
+}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatContainer/useChatContainer.ts
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatContainer/useChatContainer.ts
@@ -0,0 +1,210 @@
+import type { SessionDetailResponse } from "@/app/api/__generated__/models/sessionDetailResponse";
+import { useChatStream } from "@/components/contextual/Chat/useChatStream";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+import type { ChatMessageData } from "../ChatMessage/useChatMessage";
+import { createStreamEventDispatcher } from "./createStreamEventDispatcher";
+import {
+  createUserMessage,
+  filterAuthMessages,
+  isToolCallArray,
+  isValidMessage,
+  parseToolResponse,
+  removePageContext,
+} from "./helpers";
+
+interface UseChatContainerArgs {
+  sessionId: string | null;
+  initialMessages: SessionDetailResponse["messages"];
+  onRefreshSession: () => Promise<void>;
+}
+
+export function useChatContainer({
+  sessionId,
+  initialMessages,
+}: UseChatContainerArgs) {
+  const [messages, setMessages] = useState<ChatMessageData[]>([]);
+  const [streamingChunks, setStreamingChunks] = useState<string[]>([]);
+  const [hasTextChunks, setHasTextChunks] = useState(false);
+  const [isStreamingInitiated, setIsStreamingInitiated] = useState(false);
+  const streamingChunksRef = useRef<string[]>([]);
+  const { error, sendMessage: sendStreamMessage } = useChatStream();
+  const isStreaming = isStreamingInitiated || hasTextChunks;
+
+  const allMessages = useMemo(() => {
+    const processedInitialMessages: ChatMessageData[] = [];
+    // Map to track tool calls by their ID so we can look up tool names for tool responses
+    const toolCallMap = new Map<string, string>();
+
+    for (const msg of initialMessages) {
+      if (!isValidMessage(msg)) {
+        console.warn("Invalid message structure from backend:", msg);
+        continue;
+      }
+
+      let content = String(msg.content || "");
+      const role = String(msg.role || "assistant").toLowerCase();
+      const toolCalls = msg.tool_calls;
+      const timestamp = msg.timestamp
+        ? new Date(msg.timestamp as string)
+        : undefined;
+
+      // Remove page context from user messages when loading existing sessions
+      if (role === "user") {
+        content = removePageContext(content);
+        // Skip user messages that become empty after removing page context
+        if (!content.trim()) {
+          continue;
+        }
+        processedInitialMessages.push({
+          type: "message",
+          role: "user",
+          content,
+          timestamp,
+        });
+        continue;
+      }
+
+      // Handle assistant messages first (before tool messages) to build tool call map
+      if (role === "assistant") {
+        // Strip <thinking> tags from content
+        content = content
+          .replace(/<thinking>[\s\S]*?<\/thinking>/gi, "")
+          .trim();
+
+        // If assistant has tool calls, create tool_call messages for each
+        if (toolCalls && isToolCallArray(toolCalls) && toolCalls.length > 0) {
+          for (const toolCall of toolCalls) {
+            const toolName = toolCall.function.name;
+            const toolId = toolCall.id;
+            // Store tool name for later lookup
+            toolCallMap.set(toolId, toolName);
+
+            try {
+              const args = JSON.parse(toolCall.function.arguments || "{}");
+              processedInitialMessages.push({
+                type: "tool_call",
+                toolId,
+                toolName,
+                arguments: args,
+                timestamp,
+              });
+            } catch (err) {
+              console.warn("Failed to parse tool call arguments:", err);
+              processedInitialMessages.push({
+                type: "tool_call",
+                toolId,
+                toolName,
+                arguments: {},
+                timestamp,
+              });
+            }
+          }
+          // Only add assistant message if there's content after stripping thinking tags
+          if (content.trim()) {
+            processedInitialMessages.push({
+              type: "message",
+              role: "assistant",
+              content,
+              timestamp,
+            });
+          }
+        } else if (content.trim()) {
+          // Assistant message without tool calls, but with content
+          processedInitialMessages.push({
+            type: "message",
+            role: "assistant",
+            content,
+            timestamp,
+          });
+        }
+        continue;
+      }
+
+      // Handle tool messages - look up tool name from tool call map
+      if (role === "tool") {
+        const toolCallId = (msg.tool_call_id as string) || "";
+        const toolName = toolCallMap.get(toolCallId) || "unknown";
+        const toolResponse = parseToolResponse(
+          content,
+          toolCallId,
+          toolName,
+          timestamp,
+        );
+        if (toolResponse) {
+          processedInitialMessages.push(toolResponse);
+        }
+        continue;
+      }
+
+      // Handle other message types (system, etc.)
+      if (content.trim()) {
+        processedInitialMessages.push({
+          type: "message",
+          role: role as "user" | "assistant" | "system",
+          content,
+          timestamp,
+        });
+      }
+    }
+
+    return [...processedInitialMessages, ...messages];
+  }, [initialMessages, messages]);
+
+  const sendMessage = useCallback(
+    async function sendMessage(
+      content: string,
+      isUserMessage: boolean = true,
+      context?: { url: string; content: string },
+    ) {
+      if (!sessionId) {
+        console.error("Cannot send message: no session ID");
+        return;
+      }
+      if (isUserMessage) {
+        const userMessage = createUserMessage(content);
+        setMessages((prev) => [...filterAuthMessages(prev), userMessage]);
+      } else {
+        setMessages((prev) => filterAuthMessages(prev));
+      }
+      setStreamingChunks([]);
+      streamingChunksRef.current = [];
+      setHasTextChunks(false);
+      setIsStreamingInitiated(true);
+      const dispatcher = createStreamEventDispatcher({
+        setHasTextChunks,
+        setStreamingChunks,
+        streamingChunksRef,
+        setMessages,
+        sessionId,
+        setIsStreamingInitiated,
+      });
+      try {
+        await sendStreamMessage(
+          sessionId,
+          content,
+          dispatcher,
+          isUserMessage,
+          context,
+        );
+      } catch (err) {
+        console.error("Failed to send message:", err);
+        setIsStreamingInitiated(false);
+        const errorMessage =
+          err instanceof Error ? err.message : "Failed to send message";
+        toast.error("Failed to send message", {
+          description: errorMessage,
+        });
+      }
+    },
+    [sessionId, sendStreamMessage],
+  );
+
+  return {
+    messages: allMessages,
+    streamingChunks,
+    isStreaming,
+    error,
+    sendMessage,
+  };
+}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatCredentialsSetup/ChatCredentialsSetup.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatCredentialsSetup/ChatCredentialsSetup.tsx
@@ -0,0 +1,149 @@
+import { Text } from "@/components/atoms/Text/Text";
+import { CredentialsInput } from "@/components/contextual/CredentialsInputs/CredentialsInputs";
+import type { BlockIOCredentialsSubSchema } from "@/lib/autogpt-server-api";
+import { cn } from "@/lib/utils";
+import { CheckIcon, RobotIcon, WarningIcon } from "@phosphor-icons/react";
+import { useEffect, useRef } from "react";
+import { useChatCredentialsSetup } from "./useChatCredentialsSetup";
+
+export interface CredentialInfo {
+  provider: string;
+  providerName: string;
+  credentialType: "api_key" | "oauth2" | "user_password" | "host_scoped";
+  title: string;
+  scopes?: string[];
+}
+
+interface Props {
+  credentials: CredentialInfo[];
+  agentName?: string;
+  message: string;
+  onAllCredentialsComplete: () => void;
+  onCancel: () => void;
+  className?: string;
+}
+
+function createSchemaFromCredentialInfo(
+  credential: CredentialInfo,
+): BlockIOCredentialsSubSchema {
+  return {
+    type: "object",
+    properties: {},
+    credentials_provider: [credential.provider],
+    credentials_types: [credential.credentialType],
+    credentials_scopes: credential.scopes,
+    discriminator: undefined,
+    discriminator_mapping: undefined,
+    discriminator_values: undefined,
+  };
+}
+
+export function ChatCredentialsSetup({
+  credentials,
+  agentName: _agentName,
+  message,
+  onAllCredentialsComplete,
+  onCancel: _onCancel,
+}: Props) {
+  const { selectedCredentials, isAllComplete, handleCredentialSelect } =
+    useChatCredentialsSetup(credentials);
+
+  // Track if we've already called completion to prevent double calls
+  const hasCalledCompleteRef = useRef(false);
+
+  // Reset the completion flag when credentials change (new credential setup flow)
+  useEffect(
+    function resetCompletionFlag() {
+      hasCalledCompleteRef.current = false;
+    },
+    [credentials],
+  );
+
+  // Auto-call completion when all credentials are configured
+  useEffect(
+    function autoCompleteWhenReady() {
+      if (isAllComplete && !hasCalledCompleteRef.current) {
+        hasCalledCompleteRef.current = true;
+        onAllCredentialsComplete();
+      }
+    },
+    [isAllComplete, onAllCredentialsComplete],
+  );
+
+  return (
+    <div className="group relative flex w-full justify-start gap-3 px-4 py-3">
+      <div className="flex w-full max-w-3xl gap-3">
+        <div className="flex-shrink-0">
+          <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-indigo-500">
+            <RobotIcon className="h-4 w-4 text-indigo-50" />
+          </div>
+        </div>
+
+        <div className="flex min-w-0 flex-1 flex-col">
+          <div className="group relative min-w-20 overflow-hidden rounded-xl border border-slate-100 bg-slate-50/20 px-6 py-2.5 text-sm leading-relaxed backdrop-blur-xl">
+            <div className="absolute inset-0 bg-gradient-to-br from-slate-200/20 via-slate-300/10 to-transparent" />
+            <div className="relative z-10 space-y-3 text-slate-900">
+              <div>
+                <Text variant="h4" className="mb-1 text-slate-900">
+                  Credentials Required
+                </Text>
+                <Text variant="small" className="text-slate-600">
+                  {message}
+                </Text>
+              </div>
+
+              <div className="space-y-3">
+                {credentials.map((cred, index) => {
+                  const schema = createSchemaFromCredentialInfo(cred);
+                  const isSelected = !!selectedCredentials[cred.provider];
+
+                  return (
+                    <div
+                      key={`${cred.provider}-${index}`}
+                      className={cn(
+                        "relative rounded-lg border p-3",
+                        isSelected
+                          ? "border-green-500 bg-green-50/50"
+                          : "border-slate-200 bg-white/50",
+                      )}
+                    >
+                      <div className="mb-2 flex items-center gap-2">
+                        {isSelected ? (
+                          <CheckIcon
+                            size={16}
+                            className="text-green-500"
+                            weight="bold"
+                          />
+                        ) : (
+                          <WarningIcon
+                            size={16}
+                            className="text-slate-500"
+                            weight="bold"
+                          />
+                        )}
+                        <Text
+                          variant="small"
+                          className="font-semibold text-slate-900"
+                        >
+                          {cred.providerName}
+                        </Text>
+                      </div>
+
+                      <CredentialsInput
+                        schema={schema}
+                        selectedCredentials={selectedCredentials[cred.provider]}
+                        onSelectCredentials={(credMeta) =>
+                          handleCredentialSelect(cred.provider, credMeta)
+                        }
+                      />
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatCredentialsSetup/useChatCredentialsSetup.ts
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatCredentialsSetup/useChatCredentialsSetup.ts
@@ -0,0 +1,36 @@
+import { useState, useMemo } from "react";
+import type { CredentialInfo } from "./ChatCredentialsSetup";
+import type { CredentialsMetaInput } from "@/lib/autogpt-server-api";
+
+export function useChatCredentialsSetup(credentials: CredentialInfo[]) {
+  const [selectedCredentials, setSelectedCredentials] = useState<
+    Record<string, CredentialsMetaInput>
+  >({});
+
+  // Check if all credentials are configured
+  const isAllComplete = useMemo(
+    function checkAllComplete() {
+      if (credentials.length === 0) return false;
+      return credentials.every((cred) => selectedCredentials[cred.provider]);
+    },
+    [credentials, selectedCredentials],
+  );
+
+  function handleCredentialSelect(
+    provider: string,
+    credential?: CredentialsMetaInput,
+  ) {
+    if (credential) {
+      setSelectedCredentials((prev) => ({
+        ...prev,
+        [provider]: credential,
+      }));
+    }
+  }
+
+  return {
+    selectedCredentials,
+    isAllComplete,
+    handleCredentialSelect,
+  };
+}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatErrorState/ChatErrorState.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatErrorState/ChatErrorState.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { ErrorCard } from "@/components/molecules/ErrorCard/ErrorCard";
+import { cn } from "@/lib/utils";
+
+export interface ChatErrorStateProps {
+  error: Error;
+  onRetry?: () => void;
+  className?: string;
+}
+
+export function ChatErrorState({
+  error,
+  onRetry,
+  className,
+}: ChatErrorStateProps) {
+  return (
+    <div
+      className={cn("flex flex-1 items-center justify-center p-6", className)}
+    >
+      <ErrorCard
+        responseError={{
+          message: error.message,
+        }}
+        context="chat session"
+        onRetry={onRetry}
+        className="max-w-md"
+      />
+    </div>
+  );
+}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatInput/ChatInput.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatInput/ChatInput.tsx
@@ -0,0 +1,64 @@
+import { Input } from "@/components/atoms/Input/Input";
+import { cn } from "@/lib/utils";
+import { ArrowUpIcon } from "@phosphor-icons/react";
+import { useChatInput } from "./useChatInput";
+
+export interface ChatInputProps {
+  onSend: (message: string) => void;
+  disabled?: boolean;
+  placeholder?: string;
+  className?: string;
+}
+
+export function ChatInput({
+  onSend,
+  disabled = false,
+  placeholder = "Type your message...",
+  className,
+}: ChatInputProps) {
+  const inputId = "chat-input";
+  const { value, setValue, handleKeyDown, handleSend } = useChatInput({
+    onSend,
+    disabled,
+    maxRows: 5,
+    inputId,
+  });
+
+  return (
+    <div className={cn("relative flex-1", className)}>
+      <Input
+        id={inputId}
+        label="Chat message input"
+        hideLabel
+        type="textarea"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        disabled={disabled}
+        rows={1}
+        wrapperClassName="mb-0 relative"
+        className="pr-12"
+      />
+      <span id="chat-input-hint" className="sr-only">
+        Press Enter to send, Shift+Enter for new line
+      </span>
+
+      <button
+        onClick={handleSend}
+        disabled={disabled || !value.trim()}
+        className={cn(
+          "absolute right-3 top-1/2 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full",
+          "border border-zinc-800 bg-zinc-800 text-white",
+          "hover:border-zinc-900 hover:bg-zinc-900",
+          "disabled:border-zinc-200 disabled:bg-zinc-200 disabled:text-white disabled:opacity-50",
+          "transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950",
+          "disabled:pointer-events-none",
+        )}
+        aria-label="Send message"
+      >
+        <ArrowUpIcon className="h-3 w-3" weight="bold" />
+      </button>
+    </div>
+  );
+}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatInput/useChatInput.ts
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatInput/useChatInput.ts
@@ -0,0 +1,60 @@
+import { KeyboardEvent, useCallback, useEffect, useState } from "react";
+
+interface UseChatInputArgs {
+  onSend: (message: string) => void;
+  disabled?: boolean;
+  maxRows?: number;
+  inputId?: string;
+}
+
+export function useChatInput({
+  onSend,
+  disabled = false,
+  maxRows = 5,
+  inputId = "chat-input",
+}: UseChatInputArgs) {
+  const [value, setValue] = useState("");
+
+  useEffect(() => {
+    const textarea = document.getElementById(inputId) as HTMLTextAreaElement;
+    if (!textarea) return;
+    textarea.style.height = "auto";
+    const lineHeight = parseInt(
+      window.getComputedStyle(textarea).lineHeight,
+      10,
+    );
+    const maxHeight = lineHeight * maxRows;
+    const newHeight = Math.min(textarea.scrollHeight, maxHeight);
+    textarea.style.height = `${newHeight}px`;
+    textarea.style.overflowY =
+      textarea.scrollHeight > maxHeight ? "auto" : "hidden";
+  }, [value, maxRows, inputId]);
+
+  const handleSend = useCallback(() => {
+    if (disabled || !value.trim()) return;
+    onSend(value.trim());
+    setValue("");
+    const textarea = document.getElementById(inputId) as HTMLTextAreaElement;
+    if (textarea) {
+      textarea.style.height = "auto";
+    }
+  }, [value, onSend, disabled, inputId]);
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      if (event.key === "Enter" && !event.shiftKey) {
+        event.preventDefault();
+        handleSend();
+      }
+      // Shift+Enter allows default behavior (new line) - no need to handle explicitly
+    },
+    [handleSend],
+  );
+
+  return {
+    value,
+    setValue,
+    handleKeyDown,
+    handleSend,
+  };
+}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatLoadingState/ChatLoadingState.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatLoadingState/ChatLoadingState.tsx
@@ -0,0 +1,19 @@
+import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
+import { cn } from "@/lib/utils";
+
+export interface ChatLoadingStateProps {
+  message?: string;
+  className?: string;
+}
+
+export function ChatLoadingState({ className }: ChatLoadingStateProps) {
+  return (
+    <div
+      className={cn("flex flex-1 items-center justify-center p-6", className)}
+    >
+      <div className="flex flex-col items-center gap-4 text-center">
+        <LoadingSpinner />
+      </div>
+    </div>
+  );
+}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatMessage/ChatMessage.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatMessage/ChatMessage.tsx
@@ -0,0 +1,295 @@
+"use client";
+
+import { useGetV2GetUserProfile } from "@/app/api/__generated__/endpoints/store/store";
+import Avatar, {
+  AvatarFallback,
+  AvatarImage,
+} from "@/components/atoms/Avatar/Avatar";
+import { Button } from "@/components/atoms/Button/Button";
+import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
+import { cn } from "@/lib/utils";
+import {
+  ArrowClockwise,
+  CheckCircleIcon,
+  CheckIcon,
+  CopyIcon,
+  RobotIcon,
+} from "@phosphor-icons/react";
+import { useCallback, useState } from "react";
+import { getToolActionPhrase } from "../../helpers";
+import { AuthPromptWidget } from "../AuthPromptWidget/AuthPromptWidget";
+import { ChatCredentialsSetup } from "../ChatCredentialsSetup/ChatCredentialsSetup";
+import { MarkdownContent } from "../MarkdownContent/MarkdownContent";
+import { MessageBubble } from "../MessageBubble/MessageBubble";
+import { ToolCallMessage } from "../ToolCallMessage/ToolCallMessage";
+import { ToolResponseMessage } from "../ToolResponseMessage/ToolResponseMessage";
+import { useChatMessage, type ChatMessageData } from "./useChatMessage";
+export interface ChatMessageProps {
+  message: ChatMessageData;
+  className?: string;
+  onDismissLogin?: () => void;
+  onDismissCredentials?: () => void;
+  onSendMessage?: (content: string, isUserMessage?: boolean) => void;
+  agentOutput?: ChatMessageData;
+}
+
+export function ChatMessage({
+  message,
+  className,
+  onDismissCredentials,
+  onSendMessage,
+  agentOutput,
+}: ChatMessageProps) {
+  const { user } = useSupabase();
+  const [copied, setCopied] = useState(false);
+  const {
+    isUser,
+    isToolCall,
+    isToolResponse,
+    isLoginNeeded,
+    isCredentialsNeeded,
+  } = useChatMessage(message);
+
+  const { data: profile } = useGetV2GetUserProfile({
+    query: {
+      select: (res) => (res.status === 200 ? res.data : null),
+      enabled: isUser && !!user,
+      queryKey: ["/api/store/profile", user?.id],
+    },
+  });
+
+  const handleAllCredentialsComplete = useCallback(
+    function handleAllCredentialsComplete() {
+      // Send a user message that explicitly asks to retry the setup
+      // This ensures the LLM calls get_required_setup_info again and proceeds with execution
+      if (onSendMessage) {
+        onSendMessage(
+          "I've configured the required credentials. Please check if everything is ready and proceed with setting up the agent.",
+        );
+      }
+      // Optionally dismiss the credentials prompt
+      if (onDismissCredentials) {
+        onDismissCredentials();
+      }
+    },
+    [onSendMessage, onDismissCredentials],
+  );
+
+  function handleCancelCredentials() {
+    // Dismiss the credentials prompt
+    if (onDismissCredentials) {
+      onDismissCredentials();
+    }
+  }
+
+  const handleCopy = useCallback(async () => {
+    if (message.type !== "message") return;
+
+    try {
+      await navigator.clipboard.writeText(message.content);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (error) {
+      console.error("Failed to copy:", error);
+    }
+  }, [message]);
+
+  const handleTryAgain = useCallback(() => {
+    if (message.type !== "message" || !onSendMessage) return;
+    onSendMessage(message.content, message.role === "user");
+  }, [message, onSendMessage]);
+
+  // Render credentials needed messages
+  if (isCredentialsNeeded && message.type === "credentials_needed") {
+    return (
+      <ChatCredentialsSetup
+        credentials={message.credentials}
+        agentName={message.agentName}
+        message={message.message}
+        onAllCredentialsComplete={handleAllCredentialsComplete}
+        onCancel={handleCancelCredentials}
+        className={className}
+      />
+    );
+  }
+
+  // Render login needed messages
+  if (isLoginNeeded && message.type === "login_needed") {
+    // If user is already logged in, show success message instead of auth prompt
+    if (user) {
+      return (
+        <div className={cn("px-4 py-2", className)}>
+          <div className="my-4 overflow-hidden rounded-lg border border-green-200 bg-gradient-to-br from-green-50 to-emerald-50">
+            <div className="px-6 py-4">
+              <div className="flex items-center gap-3">
+                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-green-600">
+                  <CheckCircleIcon
+                    size={20}
+                    weight="fill"
+                    className="text-white"
+                  />
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold text-neutral-900">
+                    Successfully Authenticated
+                  </h3>
+                  <p className="text-sm text-neutral-600">
+                    You&apos;re now signed in and ready to continue
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    // Show auth prompt if not logged in
+    return (
+      <div className={cn("px-4 py-2", className)}>
+        <AuthPromptWidget
+          message={message.message}
+          sessionId={message.sessionId}
+          agentInfo={message.agentInfo}
+        />
+      </div>
+    );
+  }
+
+  // Render tool call messages
+  if (isToolCall && message.type === "tool_call") {
+    return (
+      <div className={cn("px-4 py-2", className)}>
+        <ToolCallMessage toolName={message.toolName} />
+      </div>
+    );
+  }
+
+  // Render tool response messages (but skip agent_output if it's being rendered inside assistant message)
+  if (
+    (isToolResponse && message.type === "tool_response") ||
+    message.type === "no_results" ||
+    message.type === "agent_carousel" ||
+    message.type === "execution_started"
+  ) {
+    // Check if this is an agent_output that should be rendered inside assistant message
+    if (message.type === "tool_response" && message.result) {
+      let parsedResult: Record<string, unknown> | null = null;
+      try {
+        parsedResult =
+          typeof message.result === "string"
+            ? JSON.parse(message.result)
+            : (message.result as Record<string, unknown>);
+      } catch {
+        parsedResult = null;
+      }
+      if (parsedResult?.type === "agent_output") {
+        // Skip rendering - this will be rendered inside the assistant message
+        return null;
+      }
+    }
+
+    return (
+      <div className={cn("px-4 py-2", className)}>
+        <ToolResponseMessage
+          toolName={getToolActionPhrase(message.toolName)}
+          result={message.type === "tool_response" ? message.result : undefined}
+        />
+      </div>
+    );
+  }
+
+  // Render regular chat messages
+  if (message.type === "message") {
+    return (
+      <div
+        className={cn(
+          "group relative flex w-full gap-3 px-4 py-3",
+          isUser ? "justify-end" : "justify-start",
+          className,
+        )}
+      >
+        <div className="flex w-full max-w-3xl gap-3">
+          {!isUser && (
+            <div className="flex-shrink-0">
+              <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-indigo-500">
+                <RobotIcon className="h-4 w-4 text-indigo-50" />
+              </div>
+            </div>
+          )}
+
+          <div
+            className={cn(
+              "flex min-w-0 flex-1 flex-col",
+              isUser && "items-end",
+            )}
+          >
+            <MessageBubble variant={isUser ? "user" : "assistant"}>
+              <MarkdownContent content={message.content} />
+              {agentOutput &&
+                agentOutput.type === "tool_response" &&
+                !isUser && (
+                  <div className="mt-4">
+                    <ToolResponseMessage
+                      toolName={
+                        agentOutput.toolName
+                          ? getToolActionPhrase(agentOutput.toolName)
+                          : "Agent Output"
+                      }
+                      result={agentOutput.result}
+                    />
+                  </div>
+                )}
+            </MessageBubble>
+            <div
+              className={cn(
+                "mt-1 flex gap-1",
+                isUser ? "justify-end" : "justify-start",
+              )}
+            >
+              {isUser && onSendMessage && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={handleTryAgain}
+                  aria-label="Try again"
+                >
+                  <ArrowClockwise className="size-3 text-neutral-500" />
+                </Button>
+              )}
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={handleCopy}
+                aria-label="Copy message"
+              >
+                {copied ? (
+                  <CheckIcon className="size-3 text-green-600" />
+                ) : (
+                  <CopyIcon className="size-3 text-neutral-500" />
+                )}
+              </Button>
+            </div>
+          </div>
+
+          {isUser && (
+            <div className="flex-shrink-0">
+              <Avatar className="h-7 w-7">
+                <AvatarImage
+                  src={profile?.avatar_url ?? ""}
+                  alt={profile?.username ?? "User"}
+                />
+                <AvatarFallback className="rounded-lg bg-neutral-200 text-neutral-600">
+                  {profile?.username?.charAt(0)?.toUpperCase() || "U"}
+                </AvatarFallback>
+              </Avatar>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // Fallback for unknown message types
+  return null;
+}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatMessage/useChatMessage.ts
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatMessage/useChatMessage.ts
@@ -0,0 +1,113 @@
+import type { ToolArguments, ToolResult } from "@/types/chat";
+import { formatDistanceToNow } from "date-fns";
+
+export type ChatMessageData =
+  | {
+      type: "message";
+      role: "user" | "assistant" | "system";
+      content: string;
+      timestamp?: string | Date;
+    }
+  | {
+      type: "tool_call";
+      toolId: string;
+      toolName: string;
+      arguments?: ToolArguments;
+      timestamp?: string | Date;
+    }
+  | {
+      type: "tool_response";
+      toolId: string;
+      toolName: string;
+      result: ToolResult;
+      success?: boolean;
+      timestamp?: string | Date;
+    }
+  | {
+      type: "login_needed";
+      toolName: string;
+      message: string;
+      sessionId: string;
+      agentInfo?: {
+        graph_id: string;
+        name: string;
+        trigger_type: string;
+      };
+      timestamp?: string | Date;
+    }
+  | {
+      type: "credentials_needed";
+      toolName: string;
+      credentials: Array<{
+        provider: string;
+        providerName: string;
+        credentialType: "api_key" | "oauth2" | "user_password" | "host_scoped";
+        title: string;
+        scopes?: string[];
+      }>;
+      message: string;
+      agentName?: string;
+      timestamp?: string | Date;
+    }
+  | {
+      type: "no_results";
+      toolName: string;
+      message: string;
+      suggestions?: string[];
+      sessionId?: string;
+      timestamp?: string | Date;
+    }
+  | {
+      type: "agent_carousel";
+      toolName: string;
+      agents: Array<{
+        id: string;
+        name: string;
+        description: string;
+        version?: number;
+        image_url?: string;
+      }>;
+      totalCount?: number;
+      timestamp?: string | Date;
+    }
+  | {
+      type: "execution_started";
+      toolName: string;
+      executionId: string;
+      agentName?: string;
+      message?: string;
+      libraryAgentLink?: string;
+      timestamp?: string | Date;
+    }
+  | {
+      type: "inputs_needed";
+      toolName: string;
+      agentName?: string;
+      agentId?: string;
+      graphVersion?: number;
+      inputSchema: Record<string, any>;
+      credentialsSchema?: Record<string, any>;
+      message: string;
+      timestamp?: string | Date;
+    };
+
+export function useChatMessage(message: ChatMessageData) {
+  const formattedTimestamp = message.timestamp
+    ? formatDistanceToNow(new Date(message.timestamp), { addSuffix: true })
+    : "Just now";
+
+  return {
+    formattedTimestamp,
+    isUser: message.type === "message" && message.role === "user",
+    isAssistant: message.type === "message" && message.role === "assistant",
+    isSystem: message.type === "message" && message.role === "system",
+    isToolCall: message.type === "tool_call",
+    isToolResponse: message.type === "tool_response",
+    isLoginNeeded: message.type === "login_needed",
+    isCredentialsNeeded: message.type === "credentials_needed",
+    isNoResults: message.type === "no_results",
+    isAgentCarousel: message.type === "agent_carousel",
+    isExecutionStarted: message.type === "execution_started",
+    isInputsNeeded: message.type === "inputs_needed",
+  };
+}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ExecutionStartedMessage/ExecutionStartedMessage.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/ExecutionStartedMessage/ExecutionStartedMessage.tsx
@@ -0,0 +1,90 @@
+import { Button } from "@/components/atoms/Button/Button";
+import { Text } from "@/components/atoms/Text/Text";
+import { cn } from "@/lib/utils";
+import { ArrowSquareOut, CheckCircle, Play } from "@phosphor-icons/react";
+
+export interface ExecutionStartedMessageProps {
+  executionId: string;
+  agentName?: string;
+  message?: string;
+  onViewExecution?: () => void;
+  className?: string;
+}
+
+export function ExecutionStartedMessage({
+  executionId,
+  agentName,
+  message = "Agent execution started successfully",
+  onViewExecution,
+  className,
+}: ExecutionStartedMessageProps) {
+  return (
+    <div
+      className={cn(
+        "mx-4 my-2 flex flex-col gap-4 rounded-lg border border-green-200 bg-green-50 p-6",
+        className,
+      )}
+    >
+      {/* Icon & Header */}
+      <div className="flex items-start gap-4">
+        <div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-green-500">
+          <CheckCircle size={24} weight="bold" className="text-white" />
+        </div>
+        <div className="flex-1">
+          <Text variant="h3" className="mb-1 text-green-900">
+            Execution Started
+          </Text>
+          <Text variant="body" className="text-green-700">
+            {message}
+          </Text>
+        </div>
+      </div>
+
+      {/* Details */}
+      <div className="rounded-md bg-green-100 p-4">
+        <div className="space-y-2">
+          {agentName && (
+            <div className="flex items-center justify-between">
+              <Text variant="small" className="font-semibold text-green-900">
+                Agent:
+              </Text>
+              <Text variant="body" className="text-green-800">
+                {agentName}
+              </Text>
+            </div>
+          )}
+          <div className="flex items-center justify-between">
+            <Text variant="small" className="font-semibold text-green-900">
+              Execution ID:
+            </Text>
+            <Text variant="small" className="font-mono text-green-800">
+              {executionId.slice(0, 16)}...
+            </Text>
+          </div>
+        </div>
+      </div>
+
+      {/* Action Buttons */}
+      {onViewExecution && (
+        <div className="flex gap-3">
+          <Button
+            onClick={onViewExecution}
+            variant="primary"
+            className="flex flex-1 items-center justify-center gap-2"
+          >
+            <ArrowSquareOut size={20} weight="bold" />
+            View Execution
+          </Button>
+        </div>
+      )}
+
+      <div className="flex items-center gap-2 text-green-600">
+        <Play size={16} weight="fill" />
+        <Text variant="small">
+          Your agent is now running. You can monitor its progress in the monitor
+          page.
+        </Text>
+      </div>
+    </div>
+  );
+}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/MarkdownContent/MarkdownContent.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/MarkdownContent/MarkdownContent.tsx
@@ -0,0 +1,215 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+interface MarkdownContentProps {
+  content: string;
+  className?: string;
+}
+
+interface CodeProps extends React.HTMLAttributes<HTMLElement> {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+interface ListProps extends React.HTMLAttributes<HTMLUListElement> {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  type?: string;
+}
+
+export function MarkdownContent({ content, className }: MarkdownContentProps) {
+  return (
+    <div className={cn("markdown-content", className)}>
+      <ReactMarkdown
+        skipHtml={true}
+        remarkPlugins={[remarkGfm]}
+        components={{
+          code: ({ children, className, ...props }: CodeProps) => {
+            const isInline = !className?.includes("language-");
+            if (isInline) {
+              return (
+                <code
+                  className="rounded bg-zinc-100 px-1.5 py-0.5 font-mono text-sm text-zinc-800"
+                  {...props}
+                >
+                  {children}
+                </code>
+              );
+            }
+            return (
+              <code className="font-mono text-sm text-zinc-100" {...props}>
+                {children}
+              </code>
+            );
+          },
+          pre: ({ children, ...props }) => (
+            <pre
+              className="my-2 overflow-x-auto rounded-md bg-zinc-900 p-3"
+              {...props}
+            >
+              {children}
+            </pre>
+          ),
+          a: ({ children, href, ...props }) => (
+            <a
+              href={href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-purple-600 underline decoration-1 underline-offset-2 hover:text-purple-700"
+              {...props}
+            >
+              {children}
+            </a>
+          ),
+          strong: ({ children, ...props }) => (
+            <strong className="font-semibold" {...props}>
+              {children}
+            </strong>
+          ),
+          em: ({ children, ...props }) => (
+            <em className="italic" {...props}>
+              {children}
+            </em>
+          ),
+          del: ({ children, ...props }) => (
+            <del className="line-through opacity-70" {...props}>
+              {children}
+            </del>
+          ),
+          ul: ({ children, ...props }: ListProps) => (
+            <ul
+              className={cn(
+                "my-2 space-y-1 pl-6",
+                props.className?.includes("contains-task-list")
+                  ? "list-none pl-0"
+                  : "list-disc",
+              )}
+              {...props}
+            >
+              {children}
+            </ul>
+          ),
+          ol: ({ children, ...props }) => (
+            <ol className="my-2 list-decimal space-y-1 pl-6" {...props}>
+              {children}
+            </ol>
+          ),
+          li: ({ children, ...props }: ListItemProps) => (
+            <li
+              className={cn(
+                props.className?.includes("task-list-item")
+                  ? "flex items-start"
+                  : "",
+              )}
+              {...props}
+            >
+              {children}
+            </li>
+          ),
+          input: ({ ...props }: InputProps) => {
+            if (props.type === "checkbox") {
+              return (
+                <input
+                  type="checkbox"
+                  className="mr-2 h-4 w-4 rounded border-zinc-300 text-purple-600 focus:ring-purple-500 disabled:cursor-not-allowed disabled:opacity-70"
+                  disabled
+                  {...props}
+                />
+              );
+            }
+            return <input {...props} />;
+          },
+          blockquote: ({ children, ...props }) => (
+            <blockquote
+              className="my-2 border-l-4 border-zinc-300 pl-3 italic text-zinc-700"
+              {...props}
+            >
+              {children}
+            </blockquote>
+          ),
+          h1: ({ children, ...props }) => (
+            <h1 className="my-2 text-xl font-bold text-zinc-900" {...props}>
+              {children}
+            </h1>
+          ),
+          h2: ({ children, ...props }) => (
+            <h2 className="my-2 text-lg font-semibold text-zinc-800" {...props}>
+              {children}
+            </h2>
+          ),
+          h3: ({ children, ...props }) => (
+            <h3
+              className="my-1 text-base font-semibold text-zinc-800"
+              {...props}
+            >
+              {children}
+            </h3>
+          ),
+          h4: ({ children, ...props }) => (
+            <h4 className="my-1 text-sm font-medium text-zinc-700" {...props}>
+              {children}
+            </h4>
+          ),
+          h5: ({ children, ...props }) => (
+            <h5 className="my-1 text-sm font-medium text-zinc-700" {...props}>
+              {children}
+            </h5>
+          ),
+          h6: ({ children, ...props }) => (
+            <h6 className="my-1 text-xs font-medium text-zinc-600" {...props}>
+              {children}
+            </h6>
+          ),
+          p: ({ children, ...props }) => (
+            <p className="my-2 leading-relaxed" {...props}>
+              {children}
+            </p>
+          ),
+          hr: ({ ...props }) => (
+            <hr className="my-3 border-zinc-300" {...props} />
+          ),
+          table: ({ children, ...props }) => (
+            <div className="my-2 overflow-x-auto">
+              <table
+                className="min-w-full divide-y divide-zinc-200 rounded border border-zinc-200"
+                {...props}
+              >
+                {children}
+              </table>
+            </div>
+          ),
+          th: ({ children, ...props }) => (
+            <th
+              className="bg-zinc-50 px-3 py-2 text-left text-xs font-semibold text-zinc-700"
+              {...props}
+            >
+              {children}
+            </th>
+          ),
+          td: ({ children, ...props }) => (
+            <td
+              className="border-t border-zinc-200 px-3 py-2 text-sm"
+              {...props}
+            >
+              {children}
+            </td>
+          ),
+        }}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  );
+}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/MessageBubble/MessageBubble.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/MessageBubble/MessageBubble.tsx
@@ -0,0 +1,56 @@
+import { cn } from "@/lib/utils";
+import { ReactNode } from "react";
+
+export interface MessageBubbleProps {
+  children: ReactNode;
+  variant: "user" | "assistant";
+  className?: string;
+}
+
+export function MessageBubble({
+  children,
+  variant,
+  className,
+}: MessageBubbleProps) {
+  const userTheme = {
+    bg: "bg-slate-900",
+    border: "border-slate-800",
+    gradient: "from-slate-900/30 via-slate-800/20 to-transparent",
+    text: "text-slate-50",
+  };
+
+  const assistantTheme = {
+    bg: "bg-slate-50/20",
+    border: "border-slate-100",
+    gradient: "from-slate-200/20 via-slate-300/10 to-transparent",
+    text: "text-slate-900",
+  };
+
+  const theme = variant === "user" ? userTheme : assistantTheme;
+
+  return (
+    <div
+      className={cn(
+        "group relative min-w-20 overflow-hidden rounded-xl border px-6 py-2.5 text-sm leading-relaxed backdrop-blur-xl transition-all duration-500 ease-in-out",
+        theme.bg,
+        theme.border,
+        variant === "user" && "text-right",
+        variant === "assistant" && "text-left",
+        className,
+      )}
+    >
+      {/* Gradient flare background */}
+      <div
+        className={cn("absolute inset-0 bg-gradient-to-br", theme.gradient)}
+      />
+      <div
+        className={cn(
+          "relative z-10 transition-all duration-500 ease-in-out",
+          theme.text,
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/MessageList/MessageList.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/MessageList/MessageList.tsx
@@ -0,0 +1,119 @@
+import { cn } from "@/lib/utils";
+import { ChatMessage } from "../ChatMessage/ChatMessage";
+import type { ChatMessageData } from "../ChatMessage/useChatMessage";
+import { StreamingMessage } from "../StreamingMessage/StreamingMessage";
+import { ThinkingMessage } from "../ThinkingMessage/ThinkingMessage";
+import { useMessageList } from "./useMessageList";
+
+export interface MessageListProps {
+  messages: ChatMessageData[];
+  streamingChunks?: string[];
+  isStreaming?: boolean;
+  className?: string;
+  onStreamComplete?: () => void;
+  onSendMessage?: (content: string) => void;
+}
+
+export function MessageList({
+  messages,
+  streamingChunks = [],
+  isStreaming = false,
+  className,
+  onStreamComplete,
+  onSendMessage,
+}: MessageListProps) {
+  const { messagesEndRef, messagesContainerRef } = useMessageList({
+    messageCount: messages.length,
+    isStreaming,
+  });
+
+  return (
+    <div
+      ref={messagesContainerRef}
+      className={cn(
+        "flex-1 overflow-y-auto",
+        "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-zinc-300",
+        className,
+      )}
+    >
+      <div className="mx-auto flex max-w-3xl flex-col py-4">
+        {/* Render all persisted messages */}
+        {messages.map((message, index) => {
+          // Check if current message is an agent_output tool_response
+          // and if previous message is an assistant message
+          let agentOutput: ChatMessageData | undefined;
+
+          if (message.type === "tool_response" && message.result) {
+            let parsedResult: Record<string, unknown> | null = null;
+            try {
+              parsedResult =
+                typeof message.result === "string"
+                  ? JSON.parse(message.result)
+                  : (message.result as Record<string, unknown>);
+            } catch {
+              parsedResult = null;
+            }
+            if (parsedResult?.type === "agent_output") {
+              const prevMessage = messages[index - 1];
+              if (
+                prevMessage &&
+                prevMessage.type === "message" &&
+                prevMessage.role === "assistant"
+              ) {
+                // This agent output will be rendered inside the previous assistant message
+                // Skip rendering this message separately
+                return null;
+              }
+            }
+          }
+
+          // Check if next message is an agent_output tool_response to include in current assistant message
+          if (message.type === "message" && message.role === "assistant") {
+            const nextMessage = messages[index + 1];
+            if (
+              nextMessage &&
+              nextMessage.type === "tool_response" &&
+              nextMessage.result
+            ) {
+              let parsedResult: Record<string, unknown> | null = null;
+              try {
+                parsedResult =
+                  typeof nextMessage.result === "string"
+                    ? JSON.parse(nextMessage.result)
+                    : (nextMessage.result as Record<string, unknown>);
+              } catch {
+                parsedResult = null;
+              }
+              if (parsedResult?.type === "agent_output") {
+                agentOutput = nextMessage;
+              }
+            }
+          }
+
+          return (
+            <ChatMessage
+              key={index}
+              message={message}
+              onSendMessage={onSendMessage}
+              agentOutput={agentOutput}
+            />
+          );
+        })}
+
+        {/* Render thinking message when streaming but no chunks yet */}
+        {isStreaming && streamingChunks.length === 0 && <ThinkingMessage />}
+
+        {/* Render streaming message if active */}
+        {isStreaming && streamingChunks.length > 0 && (
+          <StreamingMessage
+            chunks={streamingChunks}
+            onComplete={onStreamComplete}
+          />
+        )}
+
+        {/* Invisible div to scroll to */}
+        <div ref={messagesEndRef} />
+      </div>
+    </div>
+  );
+}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/MessageList/useMessageList.ts
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/MessageList/useMessageList.ts
@@ -0,0 +1,28 @@
+import { useEffect, useRef, useCallback } from "react";
+
+interface UseMessageListArgs {
+  messageCount: number;
+  isStreaming: boolean;
+}
+
+export function useMessageList({
+  messageCount,
+  isStreaming,
+}: UseMessageListArgs) {
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const messagesContainerRef = useRef<HTMLDivElement>(null);
+
+  const scrollToBottom = useCallback(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, []);
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messageCount, isStreaming, scrollToBottom]);
+
+  return {
+    messagesEndRef,
+    messagesContainerRef,
+    scrollToBottom,
+  };
+}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/NoResultsMessage/NoResultsMessage.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/NoResultsMessage/NoResultsMessage.tsx
@@ -0,0 +1,64 @@
+import { Text } from "@/components/atoms/Text/Text";
+import { cn } from "@/lib/utils";
+import { MagnifyingGlass, X } from "@phosphor-icons/react";
+
+export interface NoResultsMessageProps {
+  message: string;
+  suggestions?: string[];
+  className?: string;
+}
+
+export function NoResultsMessage({
+  message,
+  suggestions = [],
+  className,
+}: NoResultsMessageProps) {
+  return (
+    <div
+      className={cn(
+        "mx-4 my-2 flex flex-col items-center gap-4 rounded-lg border border-gray-200 bg-gray-50 p-6",
+        className,
+      )}
+    >
+      {/* Icon */}
+      <div className="relative flex h-16 w-16 items-center justify-center">
+        <div className="flex h-16 w-16 items-center justify-center rounded-full bg-gray-200">
+          <MagnifyingGlass size={32} weight="bold" className="text-gray-500" />
+        </div>
+        <div className="absolute -right-1 -top-1 flex h-8 w-8 items-center justify-center rounded-full bg-gray-400">
+          <X size={20} weight="bold" className="text-white" />
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="text-center">
+        <Text variant="h3" className="mb-2 text-gray-900">
+          No Results Found
+        </Text>
+        <Text variant="body" className="text-gray-700">
+          {message}
+        </Text>
+      </div>
+
+      {/* Suggestions */}
+      {suggestions.length > 0 && (
+        <div className="w-full space-y-2">
+          <Text variant="small" className="font-semibold text-gray-900">
+            Try these suggestions:
+          </Text>
+          <ul className="space-y-1 rounded-md bg-gray-100 p-4">
+            {suggestions.map((suggestion, index) => (
+              <li
+                key={index}
+                className="flex items-start gap-2 text-sm text-gray-700"
+              >
+                <span className="mt-1 text-gray-500">•</span>
+                <span>{suggestion}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/QuickActionsWelcome/QuickActionsWelcome.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/QuickActionsWelcome/QuickActionsWelcome.tsx
@@ -0,0 +1,92 @@
+import { Text } from "@/components/atoms/Text/Text";
+import { cn } from "@/lib/utils";
+
+export interface QuickActionsWelcomeProps {
+  title: string;
+  description: string;
+  actions: string[];
+  onActionClick: (action: string) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function QuickActionsWelcome({
+  title,
+  description,
+  actions,
+  onActionClick,
+  disabled = false,
+  className,
+}: QuickActionsWelcomeProps) {
+  return (
+    <div
+      className={cn("flex flex-1 items-center justify-center p-8", className)}
+    >
+      <div className="w-full max-w-3xl">
+        <div className="mb-12 text-center">
+          <Text
+            variant="h2"
+            className="mb-3 text-2xl font-semibold text-zinc-900"
+          >
+            {title}
+          </Text>
+          <Text variant="body" className="text-zinc-500">
+            {description}
+          </Text>
+        </div>
+        <div className="grid gap-3 sm:grid-cols-2">
+          {actions.map((action) => {
+            // Use slate theme for all cards
+            const theme = {
+              bg: "bg-slate-50/10",
+              border: "border-slate-100",
+              hoverBg: "hover:bg-slate-50/20",
+              hoverBorder: "hover:border-slate-200",
+              gradient: "from-slate-200/20 via-slate-300/10 to-transparent",
+              text: "text-slate-900",
+              hoverText: "group-hover:text-slate-900",
+            };
+
+            return (
+              <button
+                key={action}
+                onClick={() => onActionClick(action)}
+                disabled={disabled}
+                className={cn(
+                  "group relative overflow-hidden rounded-xl border p-5 text-left backdrop-blur-xl",
+                  "transition-all duration-200",
+                  theme.bg,
+                  theme.border,
+                  theme.hoverBg,
+                  theme.hoverBorder,
+                  "hover:shadow-sm",
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:ring-offset-2",
+                  "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:shadow-none",
+                )}
+              >
+                {/* Gradient flare background */}
+                <div
+                  className={cn(
+                    "absolute inset-0 bg-gradient-to-br",
+                    theme.gradient,
+                  )}
+                />
+
+                <Text
+                  variant="body"
+                  className={cn(
+                    "relative z-10 font-medium",
+                    theme.text,
+                    theme.hoverText,
+                  )}
+                >
+                  {action}
+                </Text>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/SessionsDrawer/SessionsDrawer.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/SessionsDrawer/SessionsDrawer.tsx
@@ -0,0 +1,136 @@
+"use client";
+
+import { useGetV2ListSessions } from "@/app/api/__generated__/endpoints/chat/chat";
+import { Text } from "@/components/atoms/Text/Text";
+import { scrollbarStyles } from "@/components/styles/scrollbars";
+import { cn } from "@/lib/utils";
+import { X } from "@phosphor-icons/react";
+import { formatDistanceToNow } from "date-fns";
+import { Drawer } from "vaul";
+
+interface SessionsDrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSelectSession: (sessionId: string) => void;
+  currentSessionId?: string | null;
+}
+
+export function SessionsDrawer({
+  isOpen,
+  onClose,
+  onSelectSession,
+  currentSessionId,
+}: SessionsDrawerProps) {
+  const { data, isLoading } = useGetV2ListSessions(
+    { limit: 100 },
+    {
+      query: {
+        enabled: isOpen,
+      },
+    },
+  );
+
+  const sessions =
+    data?.status === 200
+      ? data.data.sessions.filter((session) => {
+          // Filter out sessions without messages (sessions that were never updated)
+          // If updated_at equals created_at, the session was created but never had messages
+          return session.updated_at !== session.created_at;
+        })
+      : [];
+
+  function handleSelectSession(sessionId: string) {
+    onSelectSession(sessionId);
+    onClose();
+  }
+
+  return (
+    <Drawer.Root
+      open={isOpen}
+      onOpenChange={(open) => !open && onClose()}
+      direction="right"
+    >
+      <Drawer.Portal>
+        <Drawer.Overlay className="fixed inset-0 z-[60] bg-black/10 backdrop-blur-sm" />
+        <Drawer.Content
+          className={cn(
+            "fixed right-0 top-0 z-[70] flex h-full w-96 flex-col border-l border-zinc-200 bg-white",
+            scrollbarStyles,
+          )}
+        >
+          <div className="shrink-0 p-4">
+            <div className="flex items-center justify-between">
+              <Drawer.Title className="text-lg font-semibold">
+                Chat Sessions
+              </Drawer.Title>
+              <button
+                aria-label="Close"
+                onClick={onClose}
+                className="flex size-8 items-center justify-center rounded hover:bg-zinc-100"
+              >
+                <X width="1.25rem" height="1.25rem" />
+              </button>
+            </div>
+          </div>
+
+          <div className="flex-1 overflow-y-auto p-4">
+            {isLoading ? (
+              <div className="flex items-center justify-center py-8">
+                <Text variant="body" className="text-zinc-500">
+                  Loading sessions...
+                </Text>
+              </div>
+            ) : sessions.length === 0 ? (
+              <div className="flex items-center justify-center py-8">
+                <Text variant="body" className="text-zinc-500">
+                  No sessions found
+                </Text>
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {sessions.map((session) => {
+                  const isActive = session.id === currentSessionId;
+                  const updatedAt = session.updated_at
+                    ? formatDistanceToNow(new Date(session.updated_at), {
+                        addSuffix: true,
+                      })
+                    : "";
+
+                  return (
+                    <button
+                      key={session.id}
+                      onClick={() => handleSelectSession(session.id)}
+                      className={cn(
+                        "w-full rounded-lg border p-3 text-left transition-colors",
+                        isActive
+                          ? "border-indigo-500 bg-zinc-50"
+                          : "border-zinc-200 bg-zinc-100/50 hover:border-zinc-300 hover:bg-zinc-50",
+                      )}
+                    >
+                      <div className="flex flex-col gap-1">
+                        <Text
+                          variant="body"
+                          className={cn(
+                            "font-medium",
+                            isActive ? "text-indigo-900" : "text-zinc-900",
+                          )}
+                        >
+                          {session.title || "Untitled Chat"}
+                        </Text>
+                        <div className="flex items-center gap-2 text-xs text-zinc-500">
+                          <span>{session.id.slice(0, 8)}...</span>
+                          {updatedAt && <span>•</span>}
+                          <span>{updatedAt}</span>
+                        </div>
+                      </div>
+                    </button>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        </Drawer.Content>
+      </Drawer.Portal>
+    </Drawer.Root>
+  );
+}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/StreamingMessage/StreamingMessage.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/StreamingMessage/StreamingMessage.tsx
@@ -0,0 +1,42 @@
+import { cn } from "@/lib/utils";
+import { RobotIcon } from "@phosphor-icons/react";
+import { MarkdownContent } from "../MarkdownContent/MarkdownContent";
+import { MessageBubble } from "../MessageBubble/MessageBubble";
+import { useStreamingMessage } from "./useStreamingMessage";
+
+export interface StreamingMessageProps {
+  chunks: string[];
+  className?: string;
+  onComplete?: () => void;
+}
+
+export function StreamingMessage({
+  chunks,
+  className,
+  onComplete,
+}: StreamingMessageProps) {
+  const { displayText } = useStreamingMessage({ chunks, onComplete });
+
+  return (
+    <div
+      className={cn(
+        "group relative flex w-full justify-start gap-3 px-4 py-3",
+        className,
+      )}
+    >
+      <div className="flex w-full max-w-3xl gap-3">
+        <div className="flex-shrink-0">
+          <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-indigo-600">
+            <RobotIcon className="h-4 w-4 text-indigo-50" />
+          </div>
+        </div>
+
+        <div className="flex min-w-0 flex-1 flex-col">
+          <MessageBubble variant="assistant">
+            <MarkdownContent content={displayText} />
+          </MessageBubble>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/StreamingMessage/useStreamingMessage.ts
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/StreamingMessage/useStreamingMessage.ts
@@ -0,0 +1,25 @@
+import { useEffect, useState } from "react";
+
+interface UseStreamingMessageArgs {
+  chunks: string[];
+  onComplete?: () => void;
+}
+
+export function useStreamingMessage({
+  chunks,
+  onComplete,
+}: UseStreamingMessageArgs) {
+  const [isComplete, _setIsComplete] = useState(false);
+  const displayText = chunks.join("");
+
+  useEffect(() => {
+    if (isComplete && onComplete) {
+      onComplete();
+    }
+  }, [isComplete, onComplete]);
+
+  return {
+    displayText,
+    isComplete,
+  };
+}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ThinkingMessage/ThinkingMessage.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/ThinkingMessage/ThinkingMessage.tsx
@@ -0,0 +1,70 @@
+import { cn } from "@/lib/utils";
+import { RobotIcon } from "@phosphor-icons/react";
+import { useEffect, useRef, useState } from "react";
+import { MessageBubble } from "../MessageBubble/MessageBubble";
+
+export interface ThinkingMessageProps {
+  className?: string;
+}
+
+export function ThinkingMessage({ className }: ThinkingMessageProps) {
+  const [showSlowLoader, setShowSlowLoader] = useState(false);
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    if (timerRef.current === null) {
+      timerRef.current = setTimeout(() => {
+        setShowSlowLoader(true);
+      }, 8000);
+    }
+
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, []);
+
+  return (
+    <div
+      className={cn(
+        "group relative flex w-full justify-start gap-3 px-4 py-3",
+        className,
+      )}
+    >
+      <div className="flex w-full max-w-3xl gap-3">
+        <div className="flex-shrink-0">
+          <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-indigo-500">
+            <RobotIcon className="h-4 w-4 text-indigo-50" />
+          </div>
+        </div>
+
+        <div className="flex min-w-0 flex-1 flex-col">
+          <MessageBubble variant="assistant">
+            <div className="transition-all duration-500 ease-in-out">
+              {showSlowLoader ? (
+                <div className="flex flex-col items-center gap-3 py-2">
+                  <div className="loader" style={{ flexShrink: 0 }} />
+                  <p className="text-sm text-slate-700">
+                    Taking a bit longer to think, wait a moment please
+                  </p>
+                </div>
+              ) : (
+                <span
+                  className="inline-block bg-gradient-to-r from-neutral-400 via-neutral-600 to-neutral-400 bg-clip-text text-transparent"
+                  style={{
+                    backgroundSize: "200% 100%",
+                    animation: "shimmer 2s ease-in-out infinite",
+                  }}
+                >
+                  Thinking...
+                </span>
+              )}
+            </div>
+          </MessageBubble>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ToolCallMessage/ToolCallMessage.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/ToolCallMessage/ToolCallMessage.tsx
@@ -0,0 +1,24 @@
+import { Text } from "@/components/atoms/Text/Text";
+import { cn } from "@/lib/utils";
+import { WrenchIcon } from "@phosphor-icons/react";
+import { getToolActionPhrase } from "../../helpers";
+
+export interface ToolCallMessageProps {
+  toolName: string;
+  className?: string;
+}
+
+export function ToolCallMessage({ toolName, className }: ToolCallMessageProps) {
+  return (
+    <div className={cn("flex items-center justify-center gap-2", className)}>
+      <WrenchIcon
+        size={14}
+        weight="bold"
+        className="flex-shrink-0 text-neutral-500"
+      />
+      <Text variant="small" className="text-neutral-500">
+        {getToolActionPhrase(toolName)}...
+      </Text>
+    </div>
+  );
+}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ToolResponseMessage/ToolResponseMessage.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/ToolResponseMessage/ToolResponseMessage.tsx
@@ -0,0 +1,260 @@
+import { Text } from "@/components/atoms/Text/Text";
+import "@/components/contextual/OutputRenderers";
+import {
+  globalRegistry,
+  OutputItem,
+} from "@/components/contextual/OutputRenderers";
+import { cn } from "@/lib/utils";
+import type { ToolResult } from "@/types/chat";
+import { WrenchIcon } from "@phosphor-icons/react";
+import { getToolActionPhrase } from "../../helpers";
+
+export interface ToolResponseMessageProps {
+  toolName: string;
+  result?: ToolResult;
+  success?: boolean;
+  className?: string;
+}
+
+export function ToolResponseMessage({
+  toolName,
+  result,
+  success: _success = true,
+  className,
+}: ToolResponseMessageProps) {
+  if (!result) {
+    return (
+      <div className={cn("flex items-center justify-center gap-2", className)}>
+        <WrenchIcon
+          size={14}
+          weight="bold"
+          className="flex-shrink-0 text-neutral-500"
+        />
+        <Text variant="small" className="text-neutral-500">
+          {getToolActionPhrase(toolName)}...
+        </Text>
+      </div>
+    );
+  }
+
+  let parsedResult: Record<string, unknown> | null = null;
+  try {
+    parsedResult =
+      typeof result === "string"
+        ? JSON.parse(result)
+        : (result as Record<string, unknown>);
+  } catch {
+    parsedResult = null;
+  }
+
+  if (parsedResult && typeof parsedResult === "object") {
+    const responseType = parsedResult.type as string | undefined;
+
+    if (responseType === "agent_output") {
+      const execution = parsedResult.execution as
+        | {
+            outputs?: Record<string, unknown[]>;
+          }
+        | null
+        | undefined;
+      const outputs = execution?.outputs || {};
+      const message = parsedResult.message as string | undefined;
+
+      return (
+        <div className={cn("space-y-4 px-4 py-2", className)}>
+          <div className="flex items-center gap-2">
+            <WrenchIcon
+              size={14}
+              weight="bold"
+              className="flex-shrink-0 text-neutral-500"
+            />
+            <Text variant="small" className="text-neutral-500">
+              {getToolActionPhrase(toolName)}
+            </Text>
+          </div>
+          {message && (
+            <div className="rounded border p-4">
+              <Text variant="small" className="text-neutral-600">
+                {message}
+              </Text>
+            </div>
+          )}
+          {Object.keys(outputs).length > 0 && (
+            <div className="space-y-4">
+              {Object.entries(outputs).map(([outputName, values]) =>
+                values.map((value, index) => {
+                  const renderer = globalRegistry.getRenderer(value);
+                  if (renderer) {
+                    return (
+                      <OutputItem
+                        key={`${outputName}-${index}`}
+                        value={value}
+                        renderer={renderer}
+                        label={outputName}
+                      />
+                    );
+                  }
+                  return (
+                    <div
+                      key={`${outputName}-${index}`}
+                      className="rounded border p-4"
+                    >
+                      <Text variant="large-medium" className="mb-2 capitalize">
+                        {outputName}
+                      </Text>
+                      <pre className="overflow-auto text-sm">
+                        {JSON.stringify(value, null, 2)}
+                      </pre>
+                    </div>
+                  );
+                }),
+              )}
+            </div>
+          )}
+        </div>
+      );
+    }
+
+    if (responseType === "block_output" && parsedResult.outputs) {
+      const outputs = parsedResult.outputs as Record<string, unknown[]>;
+
+      return (
+        <div className={cn("space-y-4 px-4 py-2", className)}>
+          <div className="flex items-center gap-2">
+            <WrenchIcon
+              size={14}
+              weight="bold"
+              className="flex-shrink-0 text-neutral-500"
+            />
+            <Text variant="small" className="text-neutral-500">
+              {getToolActionPhrase(toolName)}
+            </Text>
+          </div>
+          <div className="space-y-4">
+            {Object.entries(outputs).map(([outputName, values]) =>
+              values.map((value, index) => {
+                const renderer = globalRegistry.getRenderer(value);
+                if (renderer) {
+                  return (
+                    <OutputItem
+                      key={`${outputName}-${index}`}
+                      value={value}
+                      renderer={renderer}
+                      label={outputName}
+                    />
+                  );
+                }
+                return (
+                  <div
+                    key={`${outputName}-${index}`}
+                    className="rounded border p-4"
+                  >
+                    <Text variant="large-medium" className="mb-2 capitalize">
+                      {outputName}
+                    </Text>
+                    <pre className="overflow-auto text-sm">
+                      {JSON.stringify(value, null, 2)}
+                    </pre>
+                  </div>
+                );
+              }),
+            )}
+          </div>
+        </div>
+      );
+    }
+
+    // Handle other response types with a message field (e.g., understanding_updated)
+    if (parsedResult.message && typeof parsedResult.message === "string") {
+      // Format tool name from snake_case to Title Case
+      const formattedToolName = toolName
+        .split("_")
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(" ");
+
+      // Clean up message - remove incomplete user_name references
+      let cleanedMessage = parsedResult.message;
+      // Remove "Updated understanding with: user_name" pattern if user_name is just a placeholder
+      cleanedMessage = cleanedMessage.replace(
+        /Updated understanding with:\s*user_name\.?\s*/gi,
+        "",
+      );
+      // Remove standalone user_name references
+      cleanedMessage = cleanedMessage.replace(/\buser_name\b\.?\s*/gi, "");
+      cleanedMessage = cleanedMessage.trim();
+
+      // Only show message if it has content after cleaning
+      if (!cleanedMessage) {
+        return (
+          <div
+            className={cn(
+              "flex items-center justify-center gap-2 px-4 py-2",
+              className,
+            )}
+          >
+            <WrenchIcon
+              size={14}
+              weight="bold"
+              className="flex-shrink-0 text-neutral-500"
+            />
+            <Text variant="small" className="text-neutral-500">
+              {formattedToolName}
+            </Text>
+          </div>
+        );
+      }
+
+      return (
+        <div className={cn("space-y-2 px-4 py-2", className)}>
+          <div className="flex items-center justify-center gap-2">
+            <WrenchIcon
+              size={14}
+              weight="bold"
+              className="flex-shrink-0 text-neutral-500"
+            />
+            <Text variant="small" className="text-neutral-500">
+              {formattedToolName}
+            </Text>
+          </div>
+          <div className="rounded border p-4">
+            <Text variant="small" className="text-neutral-600">
+              {cleanedMessage}
+            </Text>
+          </div>
+        </div>
+      );
+    }
+  }
+
+  const renderer = globalRegistry.getRenderer(result);
+  if (renderer) {
+    return (
+      <div className={cn("px-4 py-2", className)}>
+        <div className="mb-2 flex items-center gap-2">
+          <WrenchIcon
+            size={14}
+            weight="bold"
+            className="flex-shrink-0 text-neutral-500"
+          />
+          <Text variant="small" className="text-neutral-500">
+            {getToolActionPhrase(toolName)}
+          </Text>
+        </div>
+        <OutputItem value={result} renderer={renderer} />
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("flex items-center justify-center gap-2", className)}>
+      <WrenchIcon
+        size={14}
+        weight="bold"
+        className="flex-shrink-0 text-neutral-500"
+      />
+      <Text variant="small" className="text-neutral-500">
+        {getToolActionPhrase(toolName)}...
+      </Text>
+    </div>
+  );
+}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/helpers.ts
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/helpers.ts
@@ -0,0 +1,73 @@
+/**
+ * Maps internal tool names to user-friendly display names with emojis.
+ * @deprecated Use getToolActionPhrase or getToolCompletionPhrase for status messages
+ *
+ * @param toolName - The internal tool name from the backend
+ * @returns A user-friendly display name with an emoji prefix
+ */
+export function getToolDisplayName(toolName: string): string {
+  const toolDisplayNames: Record<string, string> = {
+    find_agent: "🔍 Search Marketplace",
+    get_agent_details: "📋 Get Agent Details",
+    check_credentials: "🔑 Check Credentials",
+    setup_agent: "⚙️ Setup Agent",
+    run_agent: "▶️ Run Agent",
+    get_required_setup_info: "📝 Get Setup Requirements",
+  };
+  return toolDisplayNames[toolName] || toolName;
+}
+
+/**
+ * Maps internal tool names to human-friendly action phrases (present continuous).
+ * Used for tool call messages to indicate what action is currently happening.
+ *
+ * @param toolName - The internal tool name from the backend
+ * @returns A human-friendly action phrase in present continuous tense
+ */
+export function getToolActionPhrase(toolName: string): string {
+  const toolActionPhrases: Record<string, string> = {
+    find_agent: "Looking for agents in the marketplace",
+    agent_carousel: "Looking for agents in the marketplace",
+    get_agent_details: "Learning about the agent",
+    check_credentials: "Checking your credentials",
+    setup_agent: "Setting up the agent",
+    execution_started: "Running the agent",
+    run_agent: "Running the agent",
+    get_required_setup_info: "Getting setup requirements",
+    schedule_agent: "Scheduling the agent to run",
+  };
+
+  // Return mapped phrase or generate human-friendly fallback
+  return toolActionPhrases[toolName] || toolName;
+}
+
+/**
+ * Maps internal tool names to human-friendly completion phrases (past tense).
+ * Used for tool response messages to indicate what action was completed.
+ *
+ * @param toolName - The internal tool name from the backend
+ * @returns A human-friendly completion phrase in past tense
+ */
+export function getToolCompletionPhrase(toolName: string): string {
+  const toolCompletionPhrases: Record<string, string> = {
+    find_agent: "Finished searching the marketplace",
+    get_agent_details: "Got agent details",
+    check_credentials: "Checked credentials",
+    setup_agent: "Agent setup complete",
+    run_agent: "Agent execution started",
+    get_required_setup_info: "Got setup requirements",
+  };
+
+  // Return mapped phrase or generate human-friendly fallback
+  return (
+    toolCompletionPhrases[toolName] ||
+    `Finished ${toolName.replace(/_/g, " ").replace("...", "")}`
+  );
+}
+
+/** Validate UUID v4 format */
+export function isValidUUID(value: string): boolean {
+  const uuidRegex =
+    /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+  return uuidRegex.test(value);
+}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/useChat.ts
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/useChat.ts
@@ -0,0 +1,119 @@
+"use client";
+
+import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
+import { useEffect, useRef } from "react";
+import { toast } from "sonner";
+import { useChatSession } from "./useChatSession";
+import { useChatStream } from "./useChatStream";
+
+export function useChat() {
+  const hasCreatedSessionRef = useRef(false);
+  const hasClaimedSessionRef = useRef(false);
+  const { user } = useSupabase();
+  const { sendMessage: sendStreamMessage } = useChatStream();
+
+  const {
+    session,
+    sessionId: sessionIdFromHook,
+    messages,
+    isLoading,
+    isCreating,
+    error,
+    createSession,
+    refreshSession,
+    claimSession,
+    clearSession: clearSessionBase,
+    loadSession,
+  } = useChatSession({
+    urlSessionId: null,
+    autoCreate: false,
+  });
+
+  useEffect(
+    function autoCreateSession() {
+      if (!hasCreatedSessionRef.current && !isCreating && !sessionIdFromHook) {
+        hasCreatedSessionRef.current = true;
+        createSession().catch((_err) => {
+          hasCreatedSessionRef.current = false;
+        });
+      }
+    },
+    [isCreating, sessionIdFromHook, createSession],
+  );
+
+  useEffect(
+    function autoClaimSession() {
+      if (
+        session &&
+        !session.user_id &&
+        user &&
+        !hasClaimedSessionRef.current &&
+        !isLoading &&
+        sessionIdFromHook
+      ) {
+        hasClaimedSessionRef.current = true;
+        claimSession(sessionIdFromHook)
+          .then(() => {
+            sendStreamMessage(
+              sessionIdFromHook,
+              "User has successfully logged in.",
+              () => {},
+              false,
+            ).catch(() => {});
+          })
+          .catch(() => {
+            hasClaimedSessionRef.current = false;
+          });
+      }
+    },
+    [
+      session,
+      user,
+      isLoading,
+      sessionIdFromHook,
+      claimSession,
+      sendStreamMessage,
+    ],
+  );
+
+  useEffect(function monitorNetworkStatus() {
+    function handleOnline() {
+      toast.success("Connection restored", {
+        description: "You're back online",
+      });
+    }
+
+    function handleOffline() {
+      toast.error("You're offline", {
+        description: "Check your internet connection",
+      });
+    }
+
+    window.addEventListener("online", handleOnline);
+    window.addEventListener("offline", handleOffline);
+
+    return () => {
+      window.removeEventListener("online", handleOnline);
+      window.removeEventListener("offline", handleOffline);
+    };
+  }, []);
+
+  function clearSession() {
+    clearSessionBase();
+    hasCreatedSessionRef.current = false;
+    hasClaimedSessionRef.current = false;
+  }
+
+  return {
+    session,
+    messages,
+    isLoading,
+    isCreating,
+    error,
+    createSession,
+    refreshSession,
+    clearSession,
+    loadSession,
+    sessionId: sessionIdFromHook,
+  };
+}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/useChatDrawer.ts
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/useChatDrawer.ts
@@ -0,0 +1,17 @@
+"use client";
+
+import { create } from "zustand";
+
+interface ChatDrawerState {
+  isOpen: boolean;
+  open: () => void;
+  close: () => void;
+  toggle: () => void;
+}
+
+export const useChatDrawer = create<ChatDrawerState>((set) => ({
+  isOpen: false,
+  open: () => set({ isOpen: true }),
+  close: () => set({ isOpen: false }),
+  toggle: () => set((state) => ({ isOpen: !state.isOpen })),
+}));
--- a/autogpt_platform/frontend/src/components/contextual/Chat/useChatSession.ts
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/useChatSession.ts
@@ -0,0 +1,271 @@
+import {
+  getGetV2GetSessionQueryKey,
+  getGetV2GetSessionQueryOptions,
+  postV2CreateSession,
+  useGetV2GetSession,
+  usePatchV2SessionAssignUser,
+  usePostV2CreateSession,
+} from "@/app/api/__generated__/endpoints/chat/chat";
+import type { SessionDetailResponse } from "@/app/api/__generated__/models/sessionDetailResponse";
+import { okData } from "@/app/api/helpers";
+import { Key, storage } from "@/services/storage/local-storage";
+import { useQueryClient } from "@tanstack/react-query";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+import { isValidUUID } from "./helpers";
+
+interface UseChatSessionArgs {
+  urlSessionId?: string | null;
+  autoCreate?: boolean;
+}
+
+export function useChatSession({
+  urlSessionId,
+  autoCreate = false,
+}: UseChatSessionArgs = {}) {
+  const queryClient = useQueryClient();
+  const [sessionId, setSessionId] = useState<string | null>(null);
+  const [error, setError] = useState<Error | null>(null);
+  const justCreatedSessionIdRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (urlSessionId) {
+      if (!isValidUUID(urlSessionId)) {
+        console.error("Invalid session ID format:", urlSessionId);
+        toast.error("Invalid session ID", {
+          description:
+            "The session ID in the URL is not valid. Starting a new session...",
+        });
+        setSessionId(null);
+        storage.clean(Key.CHAT_SESSION_ID);
+        return;
+      }
+      setSessionId(urlSessionId);
+      storage.set(Key.CHAT_SESSION_ID, urlSessionId);
+    } else {
+      const storedSessionId = storage.get(Key.CHAT_SESSION_ID);
+      if (storedSessionId) {
+        if (!isValidUUID(storedSessionId)) {
+          console.error("Invalid stored session ID:", storedSessionId);
+          storage.clean(Key.CHAT_SESSION_ID);
+          setSessionId(null);
+        } else {
+          setSessionId(storedSessionId);
+        }
+      } else if (autoCreate) {
+        setSessionId(null);
+      }
+    }
+  }, [urlSessionId, autoCreate]);
+
+  const {
+    mutateAsync: createSessionMutation,
+    isPending: isCreating,
+    error: createError,
+  } = usePostV2CreateSession();
+
+  const {
+    data: sessionData,
+    isLoading: isLoadingSession,
+    error: loadError,
+    refetch,
+  } = useGetV2GetSession(sessionId || "", {
+    query: {
+      enabled: !!sessionId,
+      select: okData,
+      staleTime: Infinity, // Never mark as stale
+      refetchOnMount: false, // Don't refetch on component mount
+      refetchOnWindowFocus: false, // Don't refetch when window regains focus
+      refetchOnReconnect: false, // Don't refetch when network reconnects
+      retry: 1,
+    },
+  });
+
+  const { mutateAsync: claimSessionMutation } = usePatchV2SessionAssignUser();
+
+  const session = useMemo(() => {
+    if (sessionData) return sessionData;
+
+    if (sessionId && justCreatedSessionIdRef.current === sessionId) {
+      return {
+        id: sessionId,
+        user_id: null,
+        messages: [],
+        created_at: new Date().toISOString(),
+        updated_at: new Date().toISOString(),
+      } as SessionDetailResponse;
+    }
+    return null;
+  }, [sessionData, sessionId]);
+
+  const messages = session?.messages || [];
+  const isLoading = isCreating || isLoadingSession;
+
+  useEffect(() => {
+    if (createError) {
+      setError(
+        createError instanceof Error
+          ? createError
+          : new Error("Failed to create session"),
+      );
+    } else if (loadError) {
+      setError(
+        loadError instanceof Error
+          ? loadError
+          : new Error("Failed to load session"),
+      );
+    } else {
+      setError(null);
+    }
+  }, [createError, loadError]);
+
+  const createSession = useCallback(
+    async function createSession() {
+      try {
+        setError(null);
+        const response = await postV2CreateSession({
+          body: JSON.stringify({}),
+        });
+        if (response.status !== 200) {
+          throw new Error("Failed to create session");
+        }
+        const newSessionId = response.data.id;
+        setSessionId(newSessionId);
+        storage.set(Key.CHAT_SESSION_ID, newSessionId);
+        justCreatedSessionIdRef.current = newSessionId;
+        setTimeout(() => {
+          if (justCreatedSessionIdRef.current === newSessionId) {
+            justCreatedSessionIdRef.current = null;
+          }
+        }, 10000);
+        return newSessionId;
+      } catch (err) {
+        const error =
+          err instanceof Error ? err : new Error("Failed to create session");
+        setError(error);
+        toast.error("Failed to create chat session", {
+          description: error.message,
+        });
+        throw error;
+      }
+    },
+    [createSessionMutation],
+  );
+
+  const loadSession = useCallback(
+    async function loadSession(id: string) {
+      try {
+        setError(null);
+        // Invalidate the query cache for this session to force a fresh fetch
+        await queryClient.invalidateQueries({
+          queryKey: getGetV2GetSessionQueryKey(id),
+        });
+        // Set sessionId after invalidation to ensure the hook refetches
+        setSessionId(id);
+        storage.set(Key.CHAT_SESSION_ID, id);
+        // Force fetch with fresh data (bypass cache)
+        const queryOptions = getGetV2GetSessionQueryOptions(id, {
+          query: {
+            staleTime: 0, // Force fresh fetch
+            retry: 1,
+          },
+        });
+        const result = await queryClient.fetchQuery(queryOptions);
+        if (!result || ("status" in result && result.status !== 200)) {
+          console.warn("Session not found on server, clearing local state");
+          storage.clean(Key.CHAT_SESSION_ID);
+          setSessionId(null);
+          throw new Error("Session not found");
+        }
+      } catch (err) {
+        const error =
+          err instanceof Error ? err : new Error("Failed to load session");
+        setError(error);
+        throw error;
+      }
+    },
+    [queryClient],
+  );
+
+  const refreshSession = useCallback(
+    async function refreshSession() {
+      if (!sessionId) {
+        console.log("[refreshSession] Skipping - no session ID");
+        return;
+      }
+      try {
+        setError(null);
+        await refetch();
+      } catch (err) {
+        const error =
+          err instanceof Error ? err : new Error("Failed to refresh session");
+        setError(error);
+        throw error;
+      }
+    },
+    [sessionId, refetch],
+  );
+
+  const claimSession = useCallback(
+    async function claimSession(id: string) {
+      try {
+        setError(null);
+        await claimSessionMutation({ sessionId: id });
+        if (justCreatedSessionIdRef.current === id) {
+          justCreatedSessionIdRef.current = null;
+        }
+        await queryClient.invalidateQueries({
+          queryKey: getGetV2GetSessionQueryKey(id),
+        });
+        await refetch();
+        toast.success("Session claimed successfully", {
+          description: "Your chat history has been saved to your account",
+        });
+      } catch (err: unknown) {
+        const error =
+          err instanceof Error ? err : new Error("Failed to claim session");
+        const is404 =
+          (typeof err === "object" &&
+            err !== null &&
+            "status" in err &&
+            err.status === 404) ||
+          (typeof err === "object" &&
+            err !== null &&
+            "response" in err &&
+            typeof err.response === "object" &&
+            err.response !== null &&
+            "status" in err.response &&
+            err.response.status === 404);
+        if (!is404) {
+          setError(error);
+          toast.error("Failed to claim session", {
+            description: error.message || "Unable to claim session",
+          });
+        }
+        throw error;
+      }
+    },
+    [claimSessionMutation, queryClient, refetch],
+  );
+
+  const clearSession = useCallback(function clearSession() {
+    setSessionId(null);
+    setError(null);
+    storage.clean(Key.CHAT_SESSION_ID);
+    justCreatedSessionIdRef.current = null;
+  }, []);
+
+  return {
+    session,
+    sessionId,
+    messages,
+    isLoading,
+    isCreating,
+    error,
+    createSession,
+    loadSession,
+    refreshSession,
+    claimSession,
+    clearSession,
+  };
+}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/useChatStream.ts
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/useChatStream.ts
@@ -0,0 +1,248 @@
+import { useState, useCallback, useRef, useEffect } from "react";
+import { toast } from "sonner";
+import type { ToolArguments, ToolResult } from "@/types/chat";
+
+const MAX_RETRIES = 3;
+const INITIAL_RETRY_DELAY = 1000;
+
+export interface StreamChunk {
+  type:
+    | "text_chunk"
+    | "text_ended"
+    | "tool_call"
+    | "tool_call_start"
+    | "tool_response"
+    | "login_needed"
+    | "need_login"
+    | "credentials_needed"
+    | "error"
+    | "usage"
+    | "stream_end";
+  timestamp?: string;
+  content?: string;
+  message?: string;
+  tool_id?: string;
+  tool_name?: string;
+  arguments?: ToolArguments;
+  result?: ToolResult;
+  success?: boolean;
+  idx?: number;
+  session_id?: string;
+  agent_info?: {
+    graph_id: string;
+    name: string;
+    trigger_type: string;
+  };
+  provider?: string;
+  provider_name?: string;
+  credential_type?: string;
+  scopes?: string[];
+  title?: string;
+  [key: string]: unknown;
+}
+
+export function useChatStream() {
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const retryCountRef = useRef<number>(0);
+  const retryTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  const stopStreaming = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+    }
+    if (retryTimeoutRef.current) {
+      clearTimeout(retryTimeoutRef.current);
+      retryTimeoutRef.current = null;
+    }
+    retryCountRef.current = 0;
+    setIsStreaming(false);
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      stopStreaming();
+    };
+  }, [stopStreaming]);
+
+  const sendMessage = useCallback(
+    async (
+      sessionId: string,
+      message: string,
+      onChunk: (chunk: StreamChunk) => void,
+      isUserMessage: boolean = true,
+      context?: { url: string; content: string },
+    ) => {
+      stopStreaming();
+
+      const abortController = new AbortController();
+      abortControllerRef.current = abortController;
+
+      if (abortController.signal.aborted) {
+        return Promise.reject(new Error("Request aborted"));
+      }
+
+      retryCountRef.current = 0;
+      setIsStreaming(true);
+      setError(null);
+
+      try {
+        const url = `/api/chat/sessions/${sessionId}/stream`;
+        const body = JSON.stringify({
+          message,
+          is_user_message: isUserMessage,
+          context: context || null,
+        });
+
+        const response = await fetch(url, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Accept: "text/event-stream",
+          },
+          body,
+          signal: abortController.signal,
+        });
+
+        if (!response.ok) {
+          const errorText = await response.text();
+          throw new Error(errorText || `HTTP ${response.status}`);
+        }
+
+        if (!response.body) {
+          throw new Error("Response body is null");
+        }
+
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = "";
+
+        return new Promise<void>((resolve, reject) => {
+          const cleanup = () => {
+            reader.cancel().catch(() => {
+              // Ignore cancel errors
+            });
+          };
+
+          const readStream = async () => {
+            try {
+              while (true) {
+                const { done, value } = await reader.read();
+
+                if (done) {
+                  cleanup();
+                  stopStreaming();
+                  resolve();
+                  return;
+                }
+
+                buffer += decoder.decode(value, { stream: true });
+                const lines = buffer.split("\n");
+                buffer = lines.pop() || "";
+
+                for (const line of lines) {
+                  if (line.startsWith("data: ")) {
+                    const data = line.slice(6);
+                    if (data === "[DONE]") {
+                      cleanup();
+                      stopStreaming();
+                      resolve();
+                      return;
+                    }
+
+                    try {
+                      const chunk = JSON.parse(data) as StreamChunk;
+
+                      if (retryCountRef.current > 0) {
+                        retryCountRef.current = 0;
+                      }
+
+                      // Call the chunk handler
+                      onChunk(chunk);
+
+                      // Handle stream lifecycle
+                      if (chunk.type === "stream_end") {
+                        cleanup();
+                        stopStreaming();
+                        resolve();
+                        return;
+                      } else if (chunk.type === "error") {
+                        cleanup();
+                        reject(
+                          new Error(
+                            chunk.message || chunk.content || "Stream error",
+                          ),
+                        );
+                        return;
+                      }
+                    } catch (err) {
+                      // Skip invalid JSON lines
+                      console.warn("Failed to parse SSE chunk:", err, data);
+                    }
+                  }
+                }
+              }
+            } catch (err) {
+              if (err instanceof Error && err.name === "AbortError") {
+                cleanup();
+                return;
+              }
+
+              const streamError =
+                err instanceof Error ? err : new Error("Failed to read stream");
+
+              if (retryCountRef.current < MAX_RETRIES) {
+                retryCountRef.current += 1;
+                const retryDelay =
+                  INITIAL_RETRY_DELAY * Math.pow(2, retryCountRef.current - 1);
+
+                toast.info("Connection interrupted", {
+                  description: `Retrying in ${retryDelay / 1000} seconds...`,
+                });
+
+                retryTimeoutRef.current = setTimeout(() => {
+                  sendMessage(
+                    sessionId,
+                    message,
+                    onChunk,
+                    isUserMessage,
+                    context,
+                  ).catch((_err) => {
+                    // Retry failed
+                  });
+                }, retryDelay);
+              } else {
+                setError(streamError);
+                toast.error("Connection Failed", {
+                  description:
+                    "Unable to connect to chat service. Please try again.",
+                });
+                cleanup();
+                stopStreaming();
+                reject(streamError);
+              }
+            }
+          };
+
+          readStream();
+        });
+      } catch (err) {
+        const streamError =
+          err instanceof Error ? err : new Error("Failed to start stream");
+        setError(streamError);
+        setIsStreaming(false);
+        throw streamError;
+      }
+    },
+    [stopStreaming],
+  );
+
+  return {
+    isStreaming,
+    error,
+    sendMessage,
+    stopStreaming,
+  };
+}
--- a/autogpt_platform/frontend/src/components/contextual/Chat/usePageContext.ts
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/usePageContext.ts
@@ -0,0 +1,42 @@
+import { useCallback } from "react";
+
+export interface PageContext {
+  url: string;
+  content: string;
+}
+
+/**
+ * Hook to capture the current page context (URL + full page content)
+ */
+export function usePageContext() {
+  const capturePageContext = useCallback((): PageContext => {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      return { url: "", content: "" };
+    }
+
+    const url = window.location.href;
+
+    // Capture full page text content
+    // Remove script and style elements, then get text
+    const clone = document.cloneNode(true) as Document;
+    const scripts = clone.querySelectorAll("script, style, noscript");
+    scripts.forEach((el) => el.remove());
+
+    // Get text content from body
+    const body = clone.body;
+    const content = body?.textContent || body?.innerText || "";
+
+    // Clean up whitespace
+    const cleanedContent = content
+      .replace(/\s+/g, " ")
+      .replace(/\n\s*\n/g, "\n")
+      .trim();
+
+    return {
+      url,
+      content: cleanedContent,
+    };
+  }, []);
+
+  return { capturePageContext };
+}
--- a/autogpt_platform/frontend/src/components/contextual/CredentialsInputs/CredentialsInputs.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/CredentialsInputs/CredentialsInputs.tsx
@@ -0,0 +1,228 @@
+import { Button } from "@/components/atoms/Button/Button";
+import { Text } from "@/components/atoms/Text/Text";
+import { InformationTooltip } from "@/components/molecules/InformationTooltip/InformationTooltip";
+import {
+  BlockIOCredentialsSubSchema,
+  CredentialsMetaInput,
+} from "@/lib/autogpt-server-api/types";
+import { cn } from "@/lib/utils";
+import { toDisplayName } from "@/providers/agent-credentials/helper";
+import { APIKeyCredentialsModal } from "./components/APIKeyCredentialsModal/APIKeyCredentialsModal";
+import { CredentialRow } from "./components/CredentialRow/CredentialRow";
+import { CredentialsSelect } from "./components/CredentialsSelect/CredentialsSelect";
+import { DeleteConfirmationModal } from "./components/DeleteConfirmationModal/DeleteConfirmationModal";
+import { HostScopedCredentialsModal } from "./components/HotScopedCredentialsModal/HotScopedCredentialsModal";
+import { OAuthFlowWaitingModal } from "./components/OAuthWaitingModal/OAuthWaitingModal";
+import { PasswordCredentialsModal } from "./components/PasswordCredentialsModal/PasswordCredentialsModal";
+import { getCredentialDisplayName } from "./helpers";
+import {
+  CredentialsInputState,
+  useCredentialsInput,
+} from "./useCredentialsInput";
+
+function isLoaded(
+  data: CredentialsInputState,
+): data is Extract<CredentialsInputState, { isLoading: false }> {
+  return data.isLoading === false;
+}
+
+type Props = {
+  schema: BlockIOCredentialsSubSchema;
+  className?: string;
+  selectedCredentials?: CredentialsMetaInput;
+  siblingInputs?: Record<string, any>;
+  onSelectCredentials: (newValue?: CredentialsMetaInput) => void;
+  onLoaded?: (loaded: boolean) => void;
+  readOnly?: boolean;
+  showTitle?: boolean;
+};
+
+export function CredentialsInput({
+  schema,
+  className,
+  selectedCredentials: selectedCredential,
+  onSelectCredentials: onSelectCredential,
+  siblingInputs,
+  onLoaded,
+  readOnly = false,
+  showTitle = true,
+}: Props) {
+  const hookData = useCredentialsInput({
+    schema,
+    selectedCredential,
+    onSelectCredential,
+    siblingInputs,
+    onLoaded,
+    readOnly,
+  });
+
+  if (!isLoaded(hookData)) {
+    return null;
+  }
+
+  const {
+    provider,
+    providerName,
+    supportsApiKey,
+    supportsOAuth2,
+    supportsUserPassword,
+    supportsHostScoped,
+    credentialsToShow,
+    oAuthError,
+    isAPICredentialsModalOpen,
+    isUserPasswordCredentialsModalOpen,
+    isHostScopedCredentialsModalOpen,
+    isOAuth2FlowInProgress,
+    oAuthPopupController,
+    credentialToDelete,
+    deleteCredentialsMutation,
+    actionButtonText,
+    setAPICredentialsModalOpen,
+    setUserPasswordCredentialsModalOpen,
+    setHostScopedCredentialsModalOpen,
+    setCredentialToDelete,
+    handleActionButtonClick,
+    handleCredentialSelect,
+    handleDeleteCredential,
+    handleDeleteConfirm,
+  } = hookData;
+
+  const displayName = toDisplayName(provider);
+  const hasCredentialsToShow = credentialsToShow.length > 0;
+
+  return (
+    <div className={cn("mb-6", className)}>
+      {showTitle && (
+        <div className="mb-2 flex items-center gap-2">
+          <Text variant="large-medium">{displayName} credentials</Text>
+          {schema.description && (
+            <InformationTooltip description={schema.description} />
+          )}
+        </div>
+      )}
+
+      {hasCredentialsToShow ? (
+        <>
+          {credentialsToShow.length > 1 && !readOnly ? (
+            <CredentialsSelect
+              credentials={credentialsToShow}
+              provider={provider}
+              displayName={displayName}
+              selectedCredentials={selectedCredential}
+              onSelectCredential={handleCredentialSelect}
+              readOnly={readOnly}
+            />
+          ) : (
+            <div className="mb-4 space-y-2">
+              {credentialsToShow.map((credential) => {
+                return (
+                  <CredentialRow
+                    key={credential.id}
+                    credential={credential}
+                    provider={provider}
+                    displayName={displayName}
+                    onSelect={() => handleCredentialSelect(credential.id)}
+                    onDelete={() =>
+                      handleDeleteCredential({
+                        id: credential.id,
+                        title: getCredentialDisplayName(
+                          credential,
+                          displayName,
+                        ),
+                      })
+                    }
+                    readOnly={readOnly}
+                  />
+                );
+              })}
+            </div>
+          )}
+          {!readOnly && (
+            <Button
+              variant="secondary"
+              size="small"
+              onClick={handleActionButtonClick}
+              className="w-fit"
+              type="button"
+            >
+              {actionButtonText}
+            </Button>
+          )}
+        </>
+      ) : (
+        !readOnly && (
+          <Button
+            variant="secondary"
+            size="small"
+            onClick={handleActionButtonClick}
+            className="w-fit"
+            type="button"
+          >
+            {actionButtonText}
+          </Button>
+        )
+      )}
+
+      {!readOnly && (
+        <>
+          {supportsApiKey ? (
+            <APIKeyCredentialsModal
+              schema={schema}
+              open={isAPICredentialsModalOpen}
+              onClose={() => setAPICredentialsModalOpen(false)}
+              onCredentialsCreate={(credsMeta) => {
+                onSelectCredential(credsMeta);
+                setAPICredentialsModalOpen(false);
+              }}
+              siblingInputs={siblingInputs}
+            />
+          ) : null}
+          {supportsOAuth2 ? (
+            <OAuthFlowWaitingModal
+              open={isOAuth2FlowInProgress}
+              onClose={() => oAuthPopupController?.abort("canceled")}
+              providerName={providerName}
+            />
+          ) : null}
+          {supportsUserPassword ? (
+            <PasswordCredentialsModal
+              schema={schema}
+              open={isUserPasswordCredentialsModalOpen}
+              onClose={() => setUserPasswordCredentialsModalOpen(false)}
+              onCredentialsCreate={(creds) => {
+                onSelectCredential(creds);
+                setUserPasswordCredentialsModalOpen(false);
+              }}
+              siblingInputs={siblingInputs}
+            />
+          ) : null}
+          {supportsHostScoped ? (
+            <HostScopedCredentialsModal
+              schema={schema}
+              open={isHostScopedCredentialsModalOpen}
+              onClose={() => setHostScopedCredentialsModalOpen(false)}
+              onCredentialsCreate={(creds) => {
+                onSelectCredential(creds);
+                setHostScopedCredentialsModalOpen(false);
+              }}
+              siblingInputs={siblingInputs}
+            />
+          ) : null}
+
+          {oAuthError ? (
+            <Text variant="body" className="mt-2 text-red-500">
+              Error: {oAuthError}
+            </Text>
+          ) : null}
+
+          <DeleteConfirmationModal
+            credentialToDelete={credentialToDelete}
+            isDeleting={deleteCredentialsMutation.isPending}
+            onClose={() => setCredentialToDelete(null)}
+            onConfirm={handleDeleteConfirm}
+          />
+        </>
+      )}
+    </div>
+  );
+}
--- a/autogpt_platform/frontend/src/components/contextual/CredentialsInputs/components/APIKeyCredentialsModal/APIKeyCredentialsModal.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/CredentialsInputs/components/APIKeyCredentialsModal/APIKeyCredentialsModal.tsx
@@ -0,0 +1,129 @@
+import { Input } from "@/components/atoms/Input/Input";
+import { Button } from "@/components/atoms/Button/Button";
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
+import {
+  Form,
+  FormDescription,
+  FormField,
+} from "@/components/__legacy__/ui/form";
+import {
+  BlockIOCredentialsSubSchema,
+  CredentialsMetaInput,
+} from "@/lib/autogpt-server-api/types";
+import { useAPIKeyCredentialsModal } from "./useAPIKeyCredentialsModal";
+
+type Props = {
+  schema: BlockIOCredentialsSubSchema;
+  open: boolean;
+  onClose: () => void;
+  onCredentialsCreate: (creds: CredentialsMetaInput) => void;
+  siblingInputs?: Record<string, any>;
+};
+
+export function APIKeyCredentialsModal({
+  schema,
+  open,
+  onClose,
+  onCredentialsCreate,
+  siblingInputs,
+}: Props) {
+  const {
+    form,
+    isLoading,
+    supportsApiKey,
+    providerName,
+    schemaDescription,
+    onSubmit,
+  } = useAPIKeyCredentialsModal({ schema, siblingInputs, onCredentialsCreate });
+
+  if (isLoading || !supportsApiKey) {
+    return null;
+  }
+
+  return (
+    <Dialog
+      title={`Add new API key for ${providerName ?? ""}`}
+      controlled={{
+        isOpen: open,
+        set: (isOpen) => {
+          if (!isOpen) onClose();
+        },
+      }}
+      onClose={onClose}
+      styling={{
+        maxWidth: "25rem",
+      }}
+    >
+      <Dialog.Content>
+        {schemaDescription && (
+          <p className="mb-4 text-sm text-zinc-600">{schemaDescription}</p>
+        )}
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2">
+            <FormField
+              control={form.control}
+              name="apiKey"
+              render={({ field }) => (
+                <>
+                  <Input
+                    id="apiKey"
+                    label="API Key"
+                    type="password"
+                    placeholder="Enter API key..."
+                    size="small"
+                    hint={
+                      schema.credentials_scopes ? (
+                        <FormDescription>
+                          Required scope(s) for this block:{" "}
+                          {schema.credentials_scopes?.map((s, i, a) => (
+                            <span key={i}>
+                              <code className="text-xs font-bold">{s}</code>
+                              {i < a.length - 1 && ", "}
+                            </span>
+                          ))}
+                        </FormDescription>
+                      ) : null
+                    }
+                    {...field}
+                  />
+                </>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="title"
+              render={({ field }) => (
+                <Input
+                  id="title"
+                  label="Name"
+                  type="text"
+                  placeholder="Enter a name for this API key..."
+                  size="small"
+                  {...field}
+                />
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="expiresAt"
+              render={({ field }) => (
+                <Input
+                  id="expiresAt"
+                  label="Expiration Date"
+                  type="datetime-local"
+                  placeholder="Select expiration date..."
+                  size="small"
+                  {...field}
+                />
+              )}
+            />
+            <Button type="submit" size="small" className="min-w-68">
+              Save & use this API key
+            </Button>
+          </form>
+        </Form>
+      </Dialog.Content>
+    </Dialog>
+  );
+}
--- a/autogpt_platform/frontend/src/components/contextual/CredentialsInputs/components/APIKeyCredentialsModal/useAPIKeyCredentialsModal.ts
+++ b/autogpt_platform/frontend/src/components/contextual/CredentialsInputs/components/APIKeyCredentialsModal/useAPIKeyCredentialsModal.ts
@@ -0,0 +1,82 @@
+import { z } from "zod";
+import { useForm, type UseFormReturn } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import useCredentials from "@/hooks/useCredentials";
+import {
+  BlockIOCredentialsSubSchema,
+  CredentialsMetaInput,
+} from "@/lib/autogpt-server-api/types";
+
+export type APIKeyFormValues = {
+  apiKey: string;
+  title: string;
+  expiresAt?: string;
+};
+
+type Args = {
+  schema: BlockIOCredentialsSubSchema;
+  siblingInputs?: Record<string, any>;
+  onCredentialsCreate: (creds: CredentialsMetaInput) => void;
+};
+
+export function useAPIKeyCredentialsModal({
+  schema,
+  siblingInputs,
+  onCredentialsCreate,
+}: Args): {
+  form: UseFormReturn<APIKeyFormValues>;
+  isLoading: boolean;
+  supportsApiKey: boolean;
+  provider?: string;
+  providerName?: string;
+  schemaDescription?: string;
+  onSubmit: (values: APIKeyFormValues) => Promise<void>;
+} {
+  const credentials = useCredentials(schema, siblingInputs);
+
+  const formSchema = z.object({
+    apiKey: z.string().min(1, "API Key is required"),
+    title: z.string().min(1, "Name is required"),
+    expiresAt: z.string().optional(),
+  });
+
+  const form = useForm<APIKeyFormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      apiKey: "",
+      title: "",
+      expiresAt: "",
+    },
+  });
+
+  async function onSubmit(values: APIKeyFormValues) {
+    if (!credentials || credentials.isLoading) return;
+    const expiresAt = values.expiresAt
+      ? new Date(values.expiresAt).getTime() / 1000
+      : undefined;
+    const newCredentials = await credentials.createAPIKeyCredentials({
+      api_key: values.apiKey,
+      title: values.title,
+      expires_at: expiresAt,
+    });
+    onCredentialsCreate({
+      provider: credentials.provider,
+      id: newCredentials.id,
+      type: "api_key",
+      title: newCredentials.title,
+    });
+  }
+
+  return {
+    form,
+    isLoading: !credentials || credentials.isLoading,
+    supportsApiKey: !!credentials?.supportsApiKey,
+    provider: credentials?.provider,
+    providerName:
+      !credentials || credentials.isLoading
+        ? undefined
+        : credentials.providerName,
+    schemaDescription: schema.description,
+    onSubmit,
+  };
+}
--- a/autogpt_platform/frontend/src/components/contextual/CredentialsInputs/components/CredentialRow/CredentialRow.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/CredentialsInputs/components/CredentialRow/CredentialRow.tsx
@@ -0,0 +1,105 @@
+import { IconKey } from "@/components/__legacy__/ui/icons";
+import { Text } from "@/components/atoms/Text/Text";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/molecules/DropdownMenu/DropdownMenu";
+import { cn } from "@/lib/utils";
+import { CaretDown, DotsThreeVertical } from "@phosphor-icons/react";
+import {
+  fallbackIcon,
+  getCredentialDisplayName,
+  MASKED_KEY_LENGTH,
+  providerIcons,
+} from "../../helpers";
+
+type CredentialRowProps = {
+  credential: {
+    id: string;
+    title?: string;
+    username?: string;
+    type: string;
+    provider: string;
+  };
+  provider: string;
+  displayName: string;
+  onSelect: () => void;
+  onDelete: () => void;
+  readOnly?: boolean;
+  showCaret?: boolean;
+  asSelectTrigger?: boolean;
+};
+
+export function CredentialRow({
+  credential,
+  provider,
+  displayName,
+  onSelect,
+  onDelete,
+  readOnly = false,
+  showCaret = false,
+  asSelectTrigger = false,
+}: CredentialRowProps) {
+  const ProviderIcon = providerIcons[provider] || fallbackIcon;
+
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-3 rounded-medium border border-zinc-200 bg-white p-3 transition-colors",
+        asSelectTrigger ? "border-0 bg-transparent" : readOnly ? "w-fit" : "",
+      )}
+      onClick={readOnly || showCaret || asSelectTrigger ? undefined : onSelect}
+      style={
+        readOnly || showCaret || asSelectTrigger
+          ? { cursor: showCaret || asSelectTrigger ? "pointer" : "default" }
+          : undefined
+      }
+    >
+      <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-gray-900">
+        <ProviderIcon className="h-3 w-3 text-white" />
+      </div>
+      <IconKey className="h-5 w-5 shrink-0 text-zinc-800" />
+      <div className="flex min-w-0 flex-1 flex-nowrap items-center gap-4">
+        <Text
+          variant="body"
+          className="line-clamp-1 flex-[0_0_50%] text-ellipsis tracking-tight"
+        >
+          {getCredentialDisplayName(credential, displayName)}
+        </Text>
+        <Text
+          variant="large"
+          className="lex-[0_0_40%] relative top-1 hidden overflow-hidden whitespace-nowrap font-mono tracking-tight md:block"
+        >
+          {"*".repeat(MASKED_KEY_LENGTH)}
+        </Text>
+      </div>
+      {showCaret && !asSelectTrigger && (
+        <CaretDown className="h-4 w-4 shrink-0 text-gray-400" />
+      )}
+      {!readOnly && !showCaret && !asSelectTrigger && (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button
+              className="ml-auto shrink-0 rounded p-1 hover:bg-gray-100"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <DotsThreeVertical className="h-5 w-5 text-gray-400" />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem
+              onClick={(e) => {
+                e.stopPropagation();
+                onDelete();
+              }}
+            >
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )}
+    </div>
+  );
+}
--- a/autogpt_platform/frontend/src/components/contextual/CredentialsInputs/components/CredentialsSelect/CredentialsSelect.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/CredentialsInputs/components/CredentialsSelect/CredentialsSelect.tsx
@@ -0,0 +1,86 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/__legacy__/ui/select";
+import { Text } from "@/components/atoms/Text/Text";
+import { CredentialsMetaInput } from "@/lib/autogpt-server-api/types";
+import { useEffect } from "react";
+import { getCredentialDisplayName } from "../../helpers";
+import { CredentialRow } from "../CredentialRow/CredentialRow";
+
+interface Props {
+  credentials: Array<{
+    id: string;
+    title?: string;
+    username?: string;
+    type: string;
+    provider: string;
+  }>;
+  provider: string;
+  displayName: string;
+  selectedCredentials?: CredentialsMetaInput;
+  onSelectCredential: (credentialId: string) => void;
+  readOnly?: boolean;
+}
+
+export function CredentialsSelect({
+  credentials,
+  provider,
+  displayName,
+  selectedCredentials,
+  onSelectCredential,
+  readOnly = false,
+}: Props) {
+  // Auto-select first credential if none is selected
+  useEffect(() => {
+    if (!selectedCredentials && credentials.length > 0) {
+      onSelectCredential(credentials[0].id);
+    }
+  }, [selectedCredentials, credentials, onSelectCredential]);
+
+  return (
+    <div className="mb-4 w-full">
+      <Select
+        value={selectedCredentials?.id || ""}
+        onValueChange={(value) => onSelectCredential(value)}
+      >
+        <SelectTrigger className="h-auto min-h-12 w-full rounded-medium border-zinc-200 p-0 pr-4 shadow-none">
+          {selectedCredentials ? (
+            <SelectValue key={selectedCredentials.id} asChild>
+              <CredentialRow
+                credential={{
+                  id: selectedCredentials.id,
+                  title: selectedCredentials.title || undefined,
+                  type: selectedCredentials.type,
+                  provider: selectedCredentials.provider,
+                }}
+                provider={provider}
+                displayName={displayName}
+                onSelect={() => {}}
+                onDelete={() => {}}
+                readOnly={readOnly}
+                asSelectTrigger={true}
+              />
+            </SelectValue>
+          ) : (
+            <SelectValue key="placeholder" placeholder="Select credential" />
+          )}
+        </SelectTrigger>
+        <SelectContent>
+          {credentials.map((credential) => (
+            <SelectItem key={credential.id} value={credential.id}>
+              <div className="flex items-center gap-2">
+                <Text variant="body" className="tracking-tight">
+                  {getCredentialDisplayName(credential, displayName)}
+                </Text>
+              </div>
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}
--- a/autogpt_platform/frontend/src/components/contextual/CredentialsInputs/components/DeleteConfirmationModal/DeleteConfirmationModal.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/CredentialsInputs/components/DeleteConfirmationModal/DeleteConfirmationModal.tsx
@@ -0,0 +1,49 @@
+import { Button } from "@/components/atoms/Button/Button";
+import { Text } from "@/components/atoms/Text/Text";
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
+
+interface Props {
+  credentialToDelete: { id: string; title: string } | null;
+  isDeleting: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+export function DeleteConfirmationModal({
+  credentialToDelete,
+  isDeleting,
+  onClose,
+  onConfirm,
+}: Props) {
+  return (
+    <Dialog
+      controlled={{
+        isOpen: credentialToDelete !== null,
+        set: (open) => {
+          if (!open) onClose();
+        },
+      }}
+      title="Delete credential"
+      styling={{ maxWidth: "32rem" }}
+    >
+      <Dialog.Content>
+        <Text variant="large">
+          Are you sure you want to delete &quot;{credentialToDelete?.title}
+          &quot;? This action cannot be undone.
+        </Text>
+        <Dialog.Footer>
+          <Button variant="secondary" onClick={onClose} disabled={isDeleting}>
+            Cancel
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={onConfirm}
+            loading={isDeleting}
+          >
+            Delete
+          </Button>
+        </Dialog.Footer>
+      </Dialog.Content>
+    </Dialog>
+  );
+}
--- a/autogpt_platform/frontend/src/components/contextual/CredentialsInputs/components/HotScopedCredentialsModal/HotScopedCredentialsModal.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/CredentialsInputs/components/HotScopedCredentialsModal/HotScopedCredentialsModal.tsx
@@ -0,0 +1,242 @@
+import { useEffect, useState } from "react";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Input } from "@/components/atoms/Input/Input";
+import { Button } from "@/components/atoms/Button/Button";
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
+import {
+  Form,
+  FormDescription,
+  FormField,
+  FormLabel,
+} from "@/components/__legacy__/ui/form";
+import useCredentials from "@/hooks/useCredentials";
+import {
+  BlockIOCredentialsSubSchema,
+  CredentialsMetaInput,
+} from "@/lib/autogpt-server-api/types";
+import { getHostFromUrl } from "@/lib/utils/url";
+import { PlusIcon, TrashIcon } from "@phosphor-icons/react";
+
+type Props = {
+  schema: BlockIOCredentialsSubSchema;
+  open: boolean;
+  onClose: () => void;
+  onCredentialsCreate: (creds: CredentialsMetaInput) => void;
+  siblingInputs?: Record<string, any>;
+};
+
+export function HostScopedCredentialsModal({
+  schema,
+  open,
+  onClose,
+  onCredentialsCreate,
+  siblingInputs,
+}: Props) {
+  const credentials = useCredentials(schema, siblingInputs);
+
+  // Get current host from siblingInputs or discriminator_values
+  const currentUrl = credentials?.discriminatorValue;
+  const currentHost = currentUrl ? getHostFromUrl(currentUrl) : "";
+
+  const formSchema = z.object({
+    host: z.string().min(1, "Host is required"),
+    title: z.string().optional(),
+    headers: z.record(z.string()).optional(),
+  });
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      host: currentHost || "",
+      title: currentHost || "Manual Entry",
+      headers: {},
+    },
+  });
+
+  const [headerPairs, setHeaderPairs] = useState<
+    Array<{ key: string; value: string }>
+  >([{ key: "", value: "" }]);
+
+  // Update form values when siblingInputs change
+  useEffect(() => {
+    if (currentHost) {
+      form.setValue("host", currentHost);
+      form.setValue("title", currentHost);
+    } else {
+      // Reset to empty when no current host
+      form.setValue("host", "");
+      form.setValue("title", "Manual Entry");
+    }
+  }, [currentHost, form]);
+
+  if (
+    !credentials ||
+    credentials.isLoading ||
+    !credentials.supportsHostScoped
+  ) {
+    return null;
+  }
+
+  const { provider, providerName, createHostScopedCredentials } = credentials;
+
+  const addHeaderPair = () => {
+    setHeaderPairs([...headerPairs, { key: "", value: "" }]);
+  };
+
+  const removeHeaderPair = (index: number) => {
+    if (headerPairs.length > 1) {
+      setHeaderPairs(headerPairs.filter((_, i) => i !== index));
+    }
+  };
+
+  const updateHeaderPair = (
+    index: number,
+    field: "key" | "value",
+    value: string,
+  ) => {
+    const newPairs = [...headerPairs];
+    newPairs[index][field] = value;
+    setHeaderPairs(newPairs);
+  };
+
+  async function onSubmit(values: z.infer<typeof formSchema>) {
+    // Convert header pairs to object, filtering out empty pairs
+    const headers = headerPairs.reduce(
+      (acc, pair) => {
+        if (pair.key.trim() && pair.value.trim()) {
+          acc[pair.key.trim()] = pair.value.trim();
+        }
+        return acc;
+      },
+      {} as Record<string, string>,
+    );
+
+    const newCredentials = await createHostScopedCredentials({
+      host: values.host,
+      title: currentHost || values.host,
+      headers,
+    });
+
+    onCredentialsCreate({
+      provider,
+      id: newCredentials.id,
+      type: "host_scoped",
+      title: newCredentials.title,
+    });
+  }
+
+  return (
+    <Dialog
+      title={`Add sensitive headers for ${providerName}`}
+      controlled={{
+        isOpen: open,
+        set: (isOpen) => {
+          if (!isOpen) onClose();
+        },
+      }}
+      onClose={onClose}
+      styling={{
+        maxWidth: "25rem",
+      }}
+    >
+      <Dialog.Content>
+        {schema.description && (
+          <p className="mb-4 text-sm text-zinc-600">{schema.description}</p>
+        )}
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2">
+            <FormField
+              control={form.control}
+              name="host"
+              render={({ field }) => (
+                <Input
+                  id="host"
+                  label="Host Pattern"
+                  type="text"
+                  size="small"
+                  readOnly={!!currentHost}
+                  hint={
+                    currentHost
+                      ? "Auto-populated from the URL field. Headers will be applied to requests to this host."
+                      : "Enter the host/domain to match against request URLs (e.g., api.example.com)."
+                  }
+                  placeholder={
+                    currentHost
+                      ? undefined
+                      : "Enter host (e.g., api.example.com)"
+                  }
+                  {...field}
+                />
+              )}
+            />
+
+            <div className="space-y-2">
+              <FormLabel>Headers</FormLabel>
+              <FormDescription className="max-w-md">
+                Add sensitive headers (like Authorization, X-API-Key) that
+                should be automatically included in requests to the specified
+                host.
+              </FormDescription>
+
+              {headerPairs.map((pair, index) => (
+                <div key={index} className="flex w-full items-center gap-4">
+                  <Input
+                    id={`header-${index}-key`}
+                    label="Header Name"
+                    placeholder="Header name (e.g., Authorization)"
+                    size="small"
+                    value={pair.key}
+                    className="flex-1"
+                    onChange={(e) =>
+                      updateHeaderPair(index, "key", e.target.value)
+                    }
+                  />
+
+                  <Input
+                    id={`header-${index}-value`}
+                    label="Header Value"
+                    size="small"
+                    type="password"
+                    className="flex-2"
+                    placeholder="Header value (e.g., Bearer token123)"
+                    value={pair.value}
+                    onChange={(e) =>
+                      updateHeaderPair(index, "value", e.target.value)
+                    }
+                  />
+                  <Button
+                    type="button"
+                    variant="secondary"
+                    size="small"
+                    onClick={() => removeHeaderPair(index)}
+                    disabled={headerPairs.length === 1}
+                  >
+                    <TrashIcon className="size-4" /> Remove
+                  </Button>
+                </div>
+              ))}
+
+              <Button
+                type="button"
+                variant="outline"
+                size="small"
+                onClick={addHeaderPair}
+              >
+                <PlusIcon className="size-4" /> Add Another Header
+              </Button>
+            </div>
+
+            <div className="pt-8">
+              <Button type="submit" className="w-full" size="small">
+                Save & use these credentials
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </Dialog.Content>
+    </Dialog>
+  );
+}
--- a/autogpt_platform/frontend/src/components/contextual/CredentialsInputs/components/OAuthWaitingModal/OAuthWaitingModal.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/CredentialsInputs/components/OAuthWaitingModal/OAuthWaitingModal.tsx
@@ -0,0 +1,30 @@
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  providerName: string;
+};
+
+export function OAuthFlowWaitingModal({ open, onClose, providerName }: Props) {
+  return (
+    <Dialog
+      title={`Waiting on ${providerName} sign-in process...`}
+      controlled={{
+        isOpen: open,
+        set: (isOpen) => {
+          if (!isOpen) onClose();
+        },
+      }}
+      onClose={onClose}
+    >
+      <Dialog.Content>
+        <p className="text-sm text-zinc-600">
+          Complete the sign-in process in the pop-up window.
+          <br />
+          Closing this dialog will cancel the sign-in process.
+        </p>
+      </Dialog.Content>
+    </Dialog>
+  );
+}
--- a/autogpt_platform/frontend/src/components/contextual/CredentialsInputs/components/PasswordCredentialsModal/PasswordCredentialsModal.tsx
+++ b/autogpt_platform/frontend/src/components/contextual/CredentialsInputs/components/PasswordCredentialsModal/PasswordCredentialsModal.tsx
@@ -0,0 +1,138 @@
+import { Form, FormField } from "@/components/__legacy__/ui/form";
+import { Button } from "@/components/atoms/Button/Button";
+import { Input } from "@/components/atoms/Input/Input";
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
+import useCredentials from "@/hooks/useCredentials";
+import {
+  BlockIOCredentialsSubSchema,
+  CredentialsMetaInput,
+} from "@/lib/autogpt-server-api/types";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+type Props = {
+  schema: BlockIOCredentialsSubSchema;
+  open: boolean;
+  onClose: () => void;
+  onCredentialsCreate: (creds: CredentialsMetaInput) => void;
+  siblingInputs?: Record<string, any>;
+};
+
+export function PasswordCredentialsModal({
+  schema,
+  open,
+  onClose,
+  onCredentialsCreate,
+  siblingInputs,
+}: Props) {
+  const credentials = useCredentials(schema, siblingInputs);
+
+  const formSchema = z.object({
+    username: z.string().min(1, "Username is required"),
+    password: z.string().min(1, "Password is required"),
+    title: z.string().min(1, "Name is required"),
+  });
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      username: "",
+      password: "",
+      title: "",
+    },
+  });
+
+  if (
+    !credentials ||
+    credentials.isLoading ||
+    !credentials.supportsUserPassword
+  ) {
+    return null;
+  }
+
+  const { provider, providerName, createUserPasswordCredentials } = credentials;
+
+  async function onSubmit(values: z.infer<typeof formSchema>) {
+    const newCredentials = await createUserPasswordCredentials({
+      username: values.username,
+      password: values.password,
+      title: values.title,
+    });
+    onCredentialsCreate({
+      provider,
+      id: newCredentials.id,
+      type: "user_password",
+      title: newCredentials.title,
+    });
+  }
+
+  return (
+    <Dialog
+      title={`Add new username & password for ${providerName}`}
+      controlled={{
+        isOpen: open,
+        set: (isOpen) => {
+          if (!isOpen) onClose();
+        },
+      }}
+      onClose={onClose}
+      styling={{
+        maxWidth: "25rem",
+      }}
+    >
+      <Dialog.Content>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="w-[98%] space-y-2 pt-4"
+          >
+            <FormField
+              control={form.control}
+              name="username"
+              render={({ field }) => (
+                <Input
+                  id="username"
+                  label="Username"
+                  type="text"
+                  placeholder="Enter username..."
+                  {...field}
+                />
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="password"
+              render={({ field }) => (
+                <Input
+                  id="password"
+                  label="Password"
+                  type="password"
+                  placeholder="Enter password..."
+                  {...field}
+                />
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="title"
+              render={({ field }) => (
+                <Input
+                  id="title"
+                  label="Name"
+                  type="text"
+                  placeholder="Enter a name for this user login..."
+                  className="mb-8"
+                  {...field}
+                />
+              )}
+            />
+            <Button type="submit" className="w-full">
+              Save & use this user login
+            </Button>
+          </form>
+        </Form>
+      </Dialog.Content>
+    </Dialog>
+  );
+}
--- a/autogpt_platform/frontend/src/components/contextual/CredentialsInputs/helpers.ts
+++ b/autogpt_platform/frontend/src/components/contextual/CredentialsInputs/helpers.ts
@@ -0,0 +1,102 @@
+import { KeyIcon } from "@phosphor-icons/react";
+import { NotionLogoIcon } from "@radix-ui/react-icons";
+import {
+  FaDiscord,
+  FaGithub,
+  FaGoogle,
+  FaHubspot,
+  FaMedium,
+  FaTwitter,
+} from "react-icons/fa";
+
+export const fallbackIcon = KeyIcon;
+
+export const providerIcons: Partial<
+  Record<string, React.FC<{ className?: string }>>
+> = {
+  aiml_api: fallbackIcon,
+  anthropic: fallbackIcon,
+  apollo: fallbackIcon,
+  e2b: fallbackIcon,
+  github: FaGithub,
+  google: FaGoogle,
+  groq: fallbackIcon,
+  http: fallbackIcon,
+  notion: NotionLogoIcon,
+  nvidia: fallbackIcon,
+  discord: FaDiscord,
+  d_id: fallbackIcon,
+  google_maps: FaGoogle,
+  jina: fallbackIcon,
+  ideogram: fallbackIcon,
+  linear: fallbackIcon,
+  medium: FaMedium,
+  mem0: fallbackIcon,
+  ollama: fallbackIcon,
+  openai: fallbackIcon,
+  openweathermap: fallbackIcon,
+  open_router: fallbackIcon,
+  llama_api: fallbackIcon,
+  pinecone: fallbackIcon,
+  enrichlayer: fallbackIcon,
+  slant3d: fallbackIcon,
+  screenshotone: fallbackIcon,
+  smtp: fallbackIcon,
+  replicate: fallbackIcon,
+  reddit: fallbackIcon,
+  fal: fallbackIcon,
+  revid: fallbackIcon,
+  twitter: FaTwitter,
+  unreal_speech: fallbackIcon,
+  exa: fallbackIcon,
+  hubspot: FaHubspot,
+  smartlead: fallbackIcon,
+  todoist: fallbackIcon,
+  zerobounce: fallbackIcon,
+};
+
+export type OAuthPopupResultMessage = { message_type: "oauth_popup_result" } & (
+  | {
+      success: true;
+      code: string;
+      state: string;
+    }
+  | {
+      success: false;
+      message: string;
+    }
+);
+
+export function getActionButtonText(
+  supportsOAuth2: boolean,
+  supportsApiKey: boolean,
+  supportsUserPassword: boolean,
+  supportsHostScoped: boolean,
+  hasExistingCredentials: boolean,
+): string {
+  if (hasExistingCredentials) {
+    if (supportsOAuth2) return "Connect another account";
+    if (supportsApiKey) return "Use a new API key";
+    if (supportsUserPassword) return "Add a new username and password";
+    if (supportsHostScoped) return "Add new headers";
+    return "Add new credentials";
+  } else {
+    if (supportsOAuth2) return "Add account";
+    if (supportsApiKey) return "Add API key";
+    if (supportsUserPassword) return "Add username and password";
+    if (supportsHostScoped) return "Add headers";
+    return "Add credentials";
+  }
+}
+
+export function getCredentialDisplayName(
+  credential: { title?: string; username?: string },
+  displayName: string,
+): string {
+  return (
+    credential.title || credential.username || `Your ${displayName} account`
+  );
+}
+
+export const OAUTH_TIMEOUT_MS = 5 * 60 * 1000;
+export const MASKED_KEY_LENGTH = 30;
--- a/autogpt_platform/frontend/src/components/contextual/CredentialsInputs/useCredentialsInput.ts
+++ b/autogpt_platform/frontend/src/components/contextual/CredentialsInputs/useCredentialsInput.ts
@@ -0,0 +1,315 @@
+import { useDeleteV1DeleteCredentials } from "@/app/api/__generated__/endpoints/integrations/integrations";
+import useCredentials from "@/hooks/useCredentials";
+import { useBackendAPI } from "@/lib/autogpt-server-api/context";
+import {
+  BlockIOCredentialsSubSchema,
+  CredentialsMetaInput,
+} from "@/lib/autogpt-server-api/types";
+import { useQueryClient } from "@tanstack/react-query";
+import { useEffect, useMemo, useState } from "react";
+import {
+  getActionButtonText,
+  OAUTH_TIMEOUT_MS,
+  OAuthPopupResultMessage,
+} from "./helpers";
+
+export type CredentialsInputState = ReturnType<typeof useCredentialsInput>;
+
+type Params = {
+  schema: BlockIOCredentialsSubSchema;
+  selectedCredential?: CredentialsMetaInput;
+  onSelectCredential: (newValue?: CredentialsMetaInput) => void;
+  siblingInputs?: Record<string, any>;
+  onLoaded?: (loaded: boolean) => void;
+  readOnly?: boolean;
+};
+
+export function useCredentialsInput({
+  schema,
+  selectedCredential,
+  onSelectCredential,
+  siblingInputs,
+  onLoaded,
+  readOnly = false,
+}: Params) {
+  const [isAPICredentialsModalOpen, setAPICredentialsModalOpen] =
+    useState(false);
+  const [
+    isUserPasswordCredentialsModalOpen,
+    setUserPasswordCredentialsModalOpen,
+  ] = useState(false);
+  const [isHostScopedCredentialsModalOpen, setHostScopedCredentialsModalOpen] =
+    useState(false);
+  const [isOAuth2FlowInProgress, setOAuth2FlowInProgress] = useState(false);
+  const [oAuthPopupController, setOAuthPopupController] =
+    useState<AbortController | null>(null);
+  const [oAuthError, setOAuthError] = useState<string | null>(null);
+  const [credentialToDelete, setCredentialToDelete] = useState<{
+    id: string;
+    title: string;
+  } | null>(null);
+
+  const api = useBackendAPI();
+  const queryClient = useQueryClient();
+  const credentials = useCredentials(schema, siblingInputs);
+
+  const deleteCredentialsMutation = useDeleteV1DeleteCredentials({
+    mutation: {
+      onSuccess: () => {
+        queryClient.invalidateQueries({
+          queryKey: ["/api/integrations/credentials"],
+        });
+        queryClient.invalidateQueries({
+          queryKey: [`/api/integrations/${credentials?.provider}/credentials`],
+        });
+        setCredentialToDelete(null);
+        if (selectedCredential?.id === credentialToDelete?.id) {
+          onSelectCredential(undefined);
+        }
+      },
+    },
+  });
+
+  useEffect(() => {
+    if (onLoaded) {
+      onLoaded(Boolean(credentials && credentials.isLoading === false));
+    }
+  }, [credentials, onLoaded]);
+
+  // Unselect credential if not available
+  useEffect(() => {
+    if (readOnly) return;
+    if (!credentials || !("savedCredentials" in credentials)) return;
+    if (
+      selectedCredential &&
+      !credentials.savedCredentials.some((c) => c.id === selectedCredential.id)
+    ) {
+      onSelectCredential(undefined);
+    }
+  }, [credentials, selectedCredential, onSelectCredential, readOnly]);
+
+  // The available credential, if there is only one
+  const singleCredential = useMemo(() => {
+    if (!credentials || !("savedCredentials" in credentials)) {
+      return null;
+    }
+
+    return credentials.savedCredentials.length === 1
+      ? credentials.savedCredentials[0]
+      : null;
+  }, [credentials]);
+
+  // Auto-select the one available credential
+  useEffect(() => {
+    if (readOnly) return;
+    if (singleCredential && !selectedCredential) {
+      onSelectCredential(singleCredential);
+    }
+  }, [singleCredential, selectedCredential, onSelectCredential, readOnly]);
+
+  if (
+    !credentials ||
+    credentials.isLoading ||
+    !("savedCredentials" in credentials)
+  ) {
+    return {
+      isLoading: true,
+    };
+  }
+
+  const {
+    provider,
+    providerName,
+    supportsApiKey,
+    supportsOAuth2,
+    supportsUserPassword,
+    supportsHostScoped,
+    savedCredentials,
+    oAuthCallback,
+  } = credentials;
+
+  async function handleOAuthLogin() {
+    setOAuthError(null);
+    const { login_url, state_token } = await api.oAuthLogin(
+      provider,
+      schema.credentials_scopes,
+    );
+    setOAuth2FlowInProgress(true);
+    const popup = window.open(login_url, "_blank", "popup=true");
+
+    if (!popup) {
+      throw new Error(
+        "Failed to open popup window. Please allow popups for this site.",
+      );
+    }
+
+    const controller = new AbortController();
+    setOAuthPopupController(controller);
+    controller.signal.onabort = () => {
+      console.debug("OAuth flow aborted");
+      setOAuth2FlowInProgress(false);
+      popup.close();
+    };
+
+    const handleMessage = async (e: MessageEvent<OAuthPopupResultMessage>) => {
+      console.debug("Message received:", e.data);
+      if (
+        typeof e.data != "object" ||
+        !("message_type" in e.data) ||
+        e.data.message_type !== "oauth_popup_result"
+      ) {
+        console.debug("Ignoring irrelevant message");
+        return;
+      }
+
+      if (!e.data.success) {
+        console.error("OAuth flow failed:", e.data.message);
+        setOAuthError(`OAuth flow failed: ${e.data.message}`);
+        setOAuth2FlowInProgress(false);
+        return;
+      }
+
+      if (e.data.state !== state_token) {
+        console.error("Invalid state token received");
+        setOAuthError("Invalid state token received");
+        setOAuth2FlowInProgress(false);
+        return;
+      }
+
+      try {
+        console.debug("Processing OAuth callback");
+        const credentials = await oAuthCallback(e.data.code, e.data.state);
+        console.debug("OAuth callback processed successfully");
+
+        // Check if the credential's scopes match the required scopes
+        const requiredScopes = schema.credentials_scopes;
+        if (requiredScopes && requiredScopes.length > 0) {
+          const grantedScopes = new Set(credentials.scopes || []);
+          const hasAllRequiredScopes = new Set(requiredScopes).isSubsetOf(
+            grantedScopes,
+          );
+
+          if (!hasAllRequiredScopes) {
+            console.error(
+              `Newly created OAuth credential for ${providerName} has insufficient scopes. Required:`,
+              requiredScopes,
+              "Granted:",
+              credentials.scopes,
+            );
+            setOAuthError(
+              "Connection failed: the granted permissions don't match what's required. " +
+                "Please contact the application administrator.",
+            );
+            return;
+          }
+        }
+
+        onSelectCredential({
+          id: credentials.id,
+          type: "oauth2",
+          title: credentials.title,
+          provider,
+        });
+      } catch (error) {
+        console.error("Error in OAuth callback:", error);
+        setOAuthError(
+          `Error in OAuth callback: ${
+            error instanceof Error ? error.message : String(error)
+          }`,
+        );
+      } finally {
+        console.debug("Finalizing OAuth flow");
+        setOAuth2FlowInProgress(false);
+        controller.abort("success");
+      }
+    };
+
+    console.debug("Adding message event listener");
+    window.addEventListener("message", handleMessage, {
+      signal: controller.signal,
+    });
+
+    setTimeout(() => {
+      console.debug("OAuth flow timed out");
+      controller.abort("timeout");
+      setOAuth2FlowInProgress(false);
+      setOAuthError("OAuth flow timed out");
+    }, OAUTH_TIMEOUT_MS);
+  }
+
+  function handleActionButtonClick() {
+    if (supportsOAuth2) {
+      handleOAuthLogin();
+    } else if (supportsApiKey) {
+      setAPICredentialsModalOpen(true);
+    } else if (supportsUserPassword) {
+      setUserPasswordCredentialsModalOpen(true);
+    } else if (supportsHostScoped) {
+      setHostScopedCredentialsModalOpen(true);
+    }
+  }
+
+  function handleCredentialSelect(credentialId: string) {
+    const selectedCreds = savedCredentials.find((c) => c.id === credentialId);
+    if (selectedCreds) {
+      onSelectCredential({
+        id: selectedCreds.id,
+        type: selectedCreds.type,
+        provider: provider,
+        title: (selectedCreds as any).title,
+      });
+    }
+  }
+
+  function handleDeleteCredential(credential: { id: string; title: string }) {
+    setCredentialToDelete(credential);
+  }
+
+  function handleDeleteConfirm() {
+    if (credentialToDelete && credentials) {
+      deleteCredentialsMutation.mutate({
+        provider: credentials.provider,
+        credId: credentialToDelete.id,
+      });
+    }
+  }
+
+  return {
+    isLoading: false as const,
+    provider,
+    providerName,
+    supportsApiKey,
+    supportsOAuth2,
+    supportsUserPassword,
+    supportsHostScoped,
+    credentialsToShow: savedCredentials,
+    selectedCredential,
+    oAuthError,
+    isAPICredentialsModalOpen,
+    isUserPasswordCredentialsModalOpen,
+    isHostScopedCredentialsModalOpen,
+    isOAuth2FlowInProgress,
+    oAuthPopupController,
+    credentialToDelete,
+    deleteCredentialsMutation,
+    actionButtonText: getActionButtonText(
+      supportsOAuth2,
+      supportsApiKey,
+      supportsUserPassword,
+      supportsHostScoped,
+      savedCredentials.length > 0,
+    ),
+    setAPICredentialsModalOpen,
+    setUserPasswordCredentialsModalOpen,
+    setHostScopedCredentialsModalOpen,
+    setCredentialToDelete,
+    handleActionButtonClick,
+    handleCredentialSelect,
+    handleDeleteCredential,
+    handleDeleteConfirm,
+    handleOAuthLogin,
+    onSelectCredential,
+    schema,
+    siblingInputs,
+  };
+}
--- a/Show More
+++ b/Show More