From 7cc60fa35e97d18f64c0046beda436dcb90c74ce Mon Sep 17 00:00:00 2001
From: Hongming Wang <hongmingwang@moleculesai.app>
Date: Sat, 20 Jun 2026 17:55:06 -0700
Subject: [PATCH] fix(canvas): clamp approval banner text; fix infra compose
 network key

ApprovalBanner rendered approval.action / approval.reason with no truncation,
so long agent-authored messages sprawled into a full-canvas text column. Add
line-clamp-2 (action) + line-clamp-3 (reason) + break-words; full text stays
reachable via the request thread.

docker-compose.infra.yml: services attach to network key `molecule-core-net`
but the top-level networks block defined the key as `default` (name-aliased),
so Docker Compose v5 rejected the project ("undefined network"). Rename the key
to match what the services reference.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 canvas/src/components/ApprovalBanner.tsx | 8 ++++++--
 docker-compose.infra.yml                 | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/canvas/src/components/ApprovalBanner.tsx b/canvas/src/components/ApprovalBanner.tsx
index 7c33d9b28..e06d5ba0b 100644
--- a/canvas/src/components/ApprovalBanner.tsx
+++ b/canvas/src/components/ApprovalBanner.tsx
@@ -71,9 +71,13 @@ export function ApprovalBanner() {
             </div>
             <div className="flex-1 min-w-0">
               <div className="text-xs text-amber-200 font-semibold">{approval.workspace_name} needs approval</div>
-              <div className="text-sm text-amber-100 mt-0.5 font-medium">{approval.action}</div>
+              {/* Clamp action + reason: agents can author very long messages,
+                  and unclamped these sprawled the banner into a full-canvas
+                  text column. line-clamp works here (plain-text fields, not
+                  markdown). break-words handles long unbroken tokens. */}
+              <div className="text-sm text-amber-100 mt-0.5 font-medium line-clamp-2 break-words">{approval.action}</div>
               {approval.reason && (
-                <div className="text-xs text-warm/70 mt-1">{approval.reason}</div>
+                <div className="text-xs text-warm/70 mt-1 line-clamp-3 break-words">{approval.reason}</div>
               )}
               <div className="flex gap-2 mt-3">
                 <button
diff --git a/docker-compose.infra.yml b/docker-compose.infra.yml
index beabe71fe..aef5ab1d8 100644
--- a/docker-compose.infra.yml
+++ b/docker-compose.infra.yml
@@ -111,7 +111,7 @@ services:
       - "8233:8080"
 
 networks:
-  default:
+  molecule-core-net:
     name: molecule-core-net
     external: true
 
-- 
2.52.0