From 98a46b962f72df30f155fd6e36c49c1c2ce8dcc8 Mon Sep 17 00:00:00 2001
From: limiteinductive <benjamintrom@gmail.com>
Date: Sun, 29 Mar 2026 21:01:20 +0200
Subject: [PATCH] =?UTF-8?q?ui:=20generous=20whitespace=20=E2=80=94=20float?=
 =?UTF-8?q?ing=20compose,=20spacious=20messages=20+=20header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Compose: floating bordered container with inner padding, no top border
- Compose: bottom bar with prefix + "enter to send" hint
- Messages: increased padding (py-3/4, px-4/5)
- Header: more breathing room (py-3/4, px-4/6)
- Modern 2026 spacing throughout

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/colony/src/App.tsx                    |  2 +-
 ui/colony/src/components/ComposeBox.tsx  | 58 +++++++++++++-----------
 ui/colony/src/components/MessageItem.tsx |  2 +-
 3 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/ui/colony/src/App.tsx b/ui/colony/src/App.tsx
index b5346d3..4e06a10 100644
--- a/ui/colony/src/App.tsx
+++ b/ui/colony/src/App.tsx
@@ -121,7 +121,7 @@ export default function App() {
       </div>
 
       <div className="flex-1 flex flex-col min-w-0">
-        <div className="px-3 py-2 md:px-4 border-b-2 border-border flex items-center gap-2">
+        <div className="px-4 py-3 md:px-6 md:py-4 border-b-2 border-border flex items-center gap-3">
           <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
             <SheetTrigger className="md:hidden p-1 h-8 w-8 text-muted-foreground hover:text-primary font-mono font-bold text-lg">
               =
diff --git a/ui/colony/src/components/ComposeBox.tsx b/ui/colony/src/components/ComposeBox.tsx
index 01c9bb2..3ebefbf 100644
--- a/ui/colony/src/components/ComposeBox.tsx
+++ b/ui/colony/src/components/ComposeBox.tsx
@@ -71,8 +71,8 @@ export function ComposeBox({
 
   return (
     <div className={cn(
-      "border-t-2 transition-colors px-3 py-2 md:px-4 pb-[env(safe-area-inset-bottom,8px)]",
-      focused ? "border-primary bg-card" : "border-border bg-background",
+      "transition-colors px-4 py-4 md:px-6 md:py-5 pb-[env(safe-area-inset-bottom,16px)]",
+      focused ? "bg-card" : "bg-background",
     )}>
       {/* Reply chip */}
       {replyTo && (
@@ -89,21 +89,12 @@ export function ComposeBox({
         </div>
       )}
 
-      <div className="flex items-end gap-2">
-        {/* Type prefix — click to cycle */}
-        <button
-          type="button"
-          onClick={() => cycleType(1)}
-          className={cn(
-            "font-mono text-sm font-bold pb-1 min-w-[20px] transition-colors select-none",
-            meta.color,
-          )}
-          title={`${msgType} (Tab to cycle, Ctrl+1-5 to select)`}
-        >
-          {meta.prefix}
-        </button>
-
-        {/* Auto-growing textarea — no send button */}
+      {/* Floating input container */}
+      <div className={cn(
+        "border-2 transition-colors px-4 py-3 md:px-5 md:py-4",
+        focused ? "border-primary/40 bg-muted/30" : "border-border bg-muted/10",
+      )}>
+        {/* Textarea */}
         <textarea
           ref={inputRef}
           value={content}
@@ -123,7 +114,6 @@ export function ComposeBox({
               e.preventDefault();
               cycleType(-1);
             }
-            // Ctrl+1-5 for type
             if (e.ctrlKey && e.key >= "1" && e.key <= "5") {
               e.preventDefault();
               const types: MessageType[] = ["text", "code", "result", "error", "plan"];
@@ -134,19 +124,33 @@ export function ComposeBox({
           disabled={sending}
           rows={1}
           className={cn(
-            "flex-1 bg-transparent text-sm font-mono text-foreground placeholder:text-muted-foreground/30 resize-none focus:outline-none leading-relaxed py-0.5",
+            "w-full bg-transparent text-sm font-mono text-foreground placeholder:text-muted-foreground/30 resize-none focus:outline-none leading-relaxed",
             sending && "opacity-30",
           )}
         />
 
-        {/* Subtle type indicator — shows current type name */}
-        <span className={cn(
-          "text-[9px] font-mono uppercase tracking-widest pb-1 transition-opacity",
-          meta.color,
-          content ? "opacity-60" : "opacity-30",
-        )}>
-          {msgType}
-        </span>
+        {/* Bottom bar — prefix + type indicator */}
+        <div className="flex items-center justify-between mt-3 pt-2">
+          <button
+            type="button"
+            onClick={() => cycleType(1)}
+            className={cn(
+              "font-mono text-xs font-bold transition-colors select-none",
+              meta.color,
+            )}
+            title={`${msgType} (Tab to cycle)`}
+          >
+            {meta.prefix}
+          </button>
+
+          <span className={cn(
+            "text-[9px] font-mono uppercase tracking-[0.2em] transition-opacity",
+            meta.color,
+            content ? "opacity-60" : "opacity-25",
+          )}>
+            {msgType} · enter to send
+          </span>
+        </div>
       </div>
     </div>
   );
diff --git a/ui/colony/src/components/MessageItem.tsx b/ui/colony/src/components/MessageItem.tsx
index cbeed0b..410228b 100644
--- a/ui/colony/src/components/MessageItem.tsx
+++ b/ui/colony/src/components/MessageItem.tsx
@@ -66,7 +66,7 @@ export function MessageItem({ message, replyTarget, onReply }: Props) {
         </div>
       )}
 
-      <div className="px-4 py-2">
+      <div className="px-4 py-3 md:px-5 md:py-4">
         {/* Header */}
         <div className="flex items-center gap-2 text-[11px] flex-wrap">
           {/* Name */}