From bb18578ae99bebf3ce6b9d81da4639d01224317e Mon Sep 17 00:00:00 2001
From: david <david.cejtlin@hal8.io>
Date: Fri, 21 Aug 2026 13:16:09 +0200
Subject: [PATCH] feat(buyer): move task form (chat window) above the supplier
 grid
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Selecting a supplier used to render its form at the bottom of the
dashboard, below the card grid — chat sessions in particular ended up
off-screen. The form now renders directly under the page title, above
the grid, and clicking Use scrolls back to the top so the freshly
opened form is visible.
---
 buyer/src/ui/pages/Dashboard.tsx | 33 +++++++++++++++++++-------------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/buyer/src/ui/pages/Dashboard.tsx b/buyer/src/ui/pages/Dashboard.tsx
index c805ec7..d25b7ac 100644
--- a/buyer/src/ui/pages/Dashboard.tsx
+++ b/buyer/src/ui/pages/Dashboard.tsx
@@ -2,8 +2,10 @@
  * buyer/src/ui/pages/Dashboard.tsx — supplier list + capability-routed task form.
  *
  * Calls marketplace.discoverSuppliers() on mount; renders a SupplierCard
- * per result. Once a supplier is selected, the form rendered below is
- * picked from `CAPABILITY_FORMS` based on the supplier's `capability_id`.
+ * per result. Once a supplier is selected, the task form (e.g. the chat
+ * window) renders ABOVE the grid — directly under the page title — and the
+ * component is picked from `CAPABILITY_FORMS` based on the supplier's
+ * `capability_id`.
  *
  * Capabilities (current registry):
  *
@@ -131,18 +133,8 @@ export default function Dashboard() {
           {error}
         </div>
       )}
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-        {suppliers.map((s) => (
-          <SupplierCard
-            key={s.utxo_ref}
-            supplier={s}
-            onUse={(sup) => setSelected(sup)}
-          />
-        ))}
-      </div>
-
       {selected && (
-        <div className="mt-8">
+        <div data-testid="task-form-section">
           <h2 className="text-xl font-semibold mb-2">
             New task → {selected.model}
             <span className="ml-2 text-sm font-normal text-gray-500">
@@ -152,6 +144,21 @@ export default function Dashboard() {
           {renderCapabilityForm(selected, advertRef, payment_lovelace)}
         </div>
       )}
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+        {suppliers.map((s) => (
+          <SupplierCard
+            key={s.utxo_ref}
+            supplier={s}
+            onUse={(sup) => {
+              setSelected(sup);
+              // The form renders above the grid; bring it into view when a
+              // card further down the page was clicked.
+              window.scrollTo({ top: 0, behavior: "smooth" });
+            }}
+          />
+        ))}
+      </div>
     </div>
   );
 }