delete messages + fix layout overflow

- DELETE /api/channels/{id}/messages/{msg_id} — soft delete, own only
- Broadcasts WsEvent::Delete to subscribers
- UI: "Del" button on hover for own messages (turns red)
- Fix layout: h-full + overflow-hidden on flex containers
- ScrollArea gets min-h-0 to properly constrain in flex
- Messages no longer push compose past viewport

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ui/colony/src/components/MessageItem.tsx

@@ -9,6 +9,8 @@ interface Props {
   message: Message;
   replyTarget?: Message;
   onReply: (id: string) => void;
+  onDelete: (channelId: string, msgId: string) => void;
+  currentUsername: string;
 }
 
 const TYPE_CONFIG: Record<string, { border: string; label: string; labelBg: string }> = {
@@ -53,7 +55,7 @@ function userHue(username: string): number {
   return Math.abs(hash) % 360;
 }
 
-export function MessageItem({ message, replyTarget, onReply }: Props) {
+export function MessageItem({ message, replyTarget, onReply, onDelete, currentUsername }: Props) {
   const [metaOpen, setMetaOpen] = useState(false);
   const isAgent = message.user.role === "agent";
   const isDeleted = !!message.deleted_at;
@@ -147,14 +149,25 @@ export function MessageItem({ message, replyTarget, onReply }: Props) {
             </Tooltip>
           </TooltipProvider>
 
-          {/* Reply button */}
-          <button
-            type="button"
-            onClick={() => onReply(message.id)}
-            className="font-sans text-[10px] font-bold uppercase tracking-wider text-muted-foreground md:opacity-0 md:group-hover:opacity-60 hover:!text-primary transition-all ml-auto min-w-[44px] min-h-[44px] md:min-w-0 md:min-h-0 flex items-center justify-end"
-          >
-            Reply
-          </button>
+          {/* Actions */}
+          <div className="ml-auto flex items-center gap-1 md:opacity-0 md:group-hover:opacity-100 transition-opacity">
+            <button
+              type="button"
+              onClick={() => onReply(message.id)}
+              className="font-sans text-[10px] font-bold uppercase tracking-wider text-muted-foreground hover:text-primary min-w-[44px] min-h-[44px] md:min-w-0 md:min-h-0 flex items-center justify-center"
+            >
+              Reply
+            </button>
+            {!isDeleted && message.user.username === currentUsername && (
+              <button
+                type="button"
+                onClick={() => onDelete(message.channel_id, message.id)}
+                className="font-sans text-[10px] font-bold uppercase tracking-wider text-muted-foreground hover:text-destructive min-w-[44px] min-h-[44px] md:min-w-0 md:min-h-0 flex items-center justify-center"
+              >
+                Del
+              </button>
+            )}
+          </div>
         </div>
 
         {/* Content */}