From d6b7429925fb502e9ade4b02cf7028722f15ab14 Mon Sep 17 00:00:00 2001
From: limiteinductive <benjamintrom@gmail.com>
Date: Sun, 29 Mar 2026 21:16:50 +0200
Subject: [PATCH] reply UX: bigger chip, click-to-scroll with highlight

- Reply chip: larger with border-l-4, bg tint, proper padding
- Reply context in messages: click to smooth-scroll to quoted message
- Quoted message flashes primary/10 bg for 1.5s on scroll
- Each message gets id="msg-{id}" for scroll targeting
- Reply context text bumped to 11px

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

diff --git a/ui/colony/src/components/ComposeBox.tsx b/ui/colony/src/components/ComposeBox.tsx
index 0336dce..f7155d4 100644
--- a/ui/colony/src/components/ComposeBox.tsx
+++ b/ui/colony/src/components/ComposeBox.tsx
@@ -126,14 +126,17 @@ export function ComposeBox({
     )}>
       {/* Reply chip */}
       {replyTo && (
-        <div className="flex items-center gap-1.5 mb-1.5 text-[10px] font-mono">
-          <span className="text-primary">^</span>
-          <span className="text-foreground font-bold">{replyTo.username}</span>
-          <span className="text-muted-foreground truncate max-w-48 md:max-w-96">{replyTo.content}</span>
+        <div className="flex items-center gap-2 mb-3 px-3 py-2 border-l-4 border-primary bg-muted/30 text-xs font-mono">
+          <div className="flex-1 min-w-0">
+            <span className="text-primary font-bold">{replyTo.username}</span>
+            <span className="text-muted-foreground ml-2 truncate inline-block max-w-48 md:max-w-96 align-bottom">
+              {replyTo.content}
+            </span>
+          </div>
           <button
             type="button"
             onClick={onClearReply}
-            className="text-muted-foreground hover:text-primary ml-auto flex-shrink-0"
+            className="text-muted-foreground hover:text-primary flex-shrink-0 text-sm font-bold min-w-[32px] min-h-[32px] flex items-center justify-center"
           >
             x
           </button>
diff --git a/ui/colony/src/components/MessageItem.tsx b/ui/colony/src/components/MessageItem.tsx
index 0303654..0438e45 100644
--- a/ui/colony/src/components/MessageItem.tsx
+++ b/ui/colony/src/components/MessageItem.tsx
@@ -60,22 +60,36 @@ export function MessageItem({ message, replyTarget, onReply }: Props) {
   const cfg = TYPE_CONFIG[message.type] || TYPE_CONFIG.text;
   const meta = message.metadata as Record<string, string> | null;
 
+  function scrollToMessage(id: string) {
+    const el = document.getElementById(`msg-${id}`);
+    if (el) {
+      el.scrollIntoView({ behavior: "smooth", block: "center" });
+      el.classList.add("!bg-primary/10");
+      setTimeout(() => el.classList.remove("!bg-primary/10"), 1500);
+    }
+  }
+
   return (
     <div
+      id={`msg-${message.id}`}
       className={cn(
-        "group border-b border-border/50 border-l-4 transition-colors",
+        "group border-b border-border/50 border-l-4 transition-all duration-300",
         cfg.border,
         isAgent ? "bg-card" : "bg-background",
         "hover:bg-muted/30",
       )}
     >
-      {/* Reply context */}
+      {/* Reply context — click to scroll to quoted message */}
       {replyTarget && (
-        <div className="px-4 pt-1.5 text-[10px] text-muted-foreground flex items-center gap-1">
+        <button
+          type="button"
+          onClick={() => scrollToMessage(replyTarget.id)}
+          className="w-full text-left px-4 pt-2 pb-0.5 text-[11px] text-muted-foreground flex items-center gap-1.5 hover:text-foreground transition-colors"
+        >
           <span className="text-primary font-bold">^</span>
           <span className="font-bold">{replyTarget.user.display_name}</span>
-          <span className="truncate max-w-40 md:max-w-80 opacity-60">{replyTarget.content}</span>
-        </div>
+          <span className="truncate max-w-48 md:max-w-96 opacity-60">{replyTarget.content}</span>
+        </button>
       )}
 
       <div className="px-4 py-3 md:px-5 md:py-4">