From 3c33215b29d3c3a6d974da57f2478cb8a1311f53 Mon Sep 17 00:00:00 2001
From: limiteinductive <benjamintrom@gmail.com>
Date: Sun, 29 Mar 2026 21:10:39 +0200
Subject: [PATCH] ui: ScrollArea, Skeleton loading, apes can't set message type
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ScrollArea for messages + sidebar (themed scrollbar)
- Skeleton loading state on channel switch (3 placeholder rows)
- Apes only see ">" prefix and "enter to send" — no type cycling
- Agents get full type selector (Tab/Ctrl+1-5)
- Better empty state text

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/colony/src/App.tsx                       | 45 ++++++++++-----
 ui/colony/src/components/ChannelSidebar.tsx |  5 +-
 ui/colony/src/components/ComposeBox.tsx     | 63 ++++++++++++---------
 3 files changed, 71 insertions(+), 42 deletions(-)

diff --git a/ui/colony/src/App.tsx b/ui/colony/src/App.tsx
index 4e06a10..3a22e50 100644
--- a/ui/colony/src/App.tsx
+++ b/ui/colony/src/App.tsx
@@ -6,6 +6,8 @@ import { ChannelSidebar } from "@/components/ChannelSidebar";
 import { MessageItem } from "@/components/MessageItem";
 import { ComposeBox } from "@/components/ComposeBox";
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Skeleton } from "@/components/ui/skeleton";
 import { useChannelSocket } from "@/hooks/useChannelSocket";
 
 function GatePage() {
@@ -40,6 +42,7 @@ export default function App() {
   const [channels, setChannels] = useState<Channel[]>([]);
   const [activeChannelId, setActiveChannelId] = useState<string | null>(null);
   const [messages, setMessages] = useState<Message[]>([]);
+  const [loading, setLoading] = useState(false);
   const [replyTo, setReplyTo] = useState<string | null>(null);
   const [sheetOpen, setSheetOpen] = useState(false);
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -57,6 +60,7 @@ export default function App() {
   const loadMessages = useCallback(async () => {
     const channelId = activeChannelRef.current;
     if (!channelId) return;
+    setLoading(true);
     try {
       const msgs = await getMessages(channelId);
       if (activeChannelRef.current === channelId) {
@@ -64,6 +68,8 @@ export default function App() {
       }
     } catch {
       // Silently ignore fetch errors
+    } finally {
+      setLoading(false);
     }
   }, []);
 
@@ -149,21 +155,34 @@ export default function App() {
           )}
         </div>
 
-        <div ref={scrollRef} className="flex-1 overflow-y-auto">
-          {messages.length === 0 && activeChannelId && (
-            <div className="flex items-center justify-center h-full text-muted-foreground text-xs">
-              no messages yet
+        <ScrollArea ref={scrollRef} className="flex-1">
+          {loading && messages.length === 0 ? (
+            <div className="p-5 space-y-4">
+              {[1, 2, 3].map((i) => (
+                <div key={i} className="flex items-start gap-3">
+                  <Skeleton className="h-6 w-6 rounded-none" />
+                  <div className="flex-1 space-y-2">
+                    <Skeleton className="h-3 w-24 rounded-none" />
+                    <Skeleton className="h-3 w-full rounded-none" />
+                  </div>
+                </div>
+              ))}
             </div>
+          ) : messages.length === 0 && activeChannelId ? (
+            <div className="flex items-center justify-center h-full text-muted-foreground text-xs font-mono py-20">
+              no messages yet — start typing below
+            </div>
+          ) : (
+            messages.map((msg) => (
+              <MessageItem
+                key={msg.id}
+                message={msg}
+                replyTarget={msg.reply_to ? messagesById.get(msg.reply_to) : undefined}
+                onReply={setReplyTo}
+              />
+            ))
           )}
-          {messages.map((msg) => (
-            <MessageItem
-              key={msg.id}
-              message={msg}
-              replyTarget={msg.reply_to ? messagesById.get(msg.reply_to) : undefined}
-              onReply={setReplyTo}
-            />
-          ))}
-        </div>
+        </ScrollArea>
 
         {activeChannelId && (
           <ComposeBox
diff --git a/ui/colony/src/components/ChannelSidebar.tsx b/ui/colony/src/components/ChannelSidebar.tsx
index 0e8ee92..62709e2 100644
--- a/ui/colony/src/components/ChannelSidebar.tsx
+++ b/ui/colony/src/components/ChannelSidebar.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import type { Channel } from "@/types/Channel";
 import { createChannel, getCurrentUsername } from "@/api";
+import { ScrollArea } from "@/components/ui/scroll-area";
 
 interface Props {
   channels: Channel[];
@@ -48,7 +49,7 @@ export function ChannelSidebar({
       </div>
 
       {/* Channel list */}
-      <div className="flex-1 overflow-y-auto">
+      <ScrollArea className="flex-1">
         <div className="px-3 pt-3 pb-1 font-sans text-[10px] font-bold text-muted-foreground uppercase tracking-[0.2em]">
           Channels
         </div>
@@ -67,7 +68,7 @@ export function ChannelSidebar({
             {ch.name}
           </button>
         ))}
-      </div>
+      </ScrollArea>
 
       {/* User strip */}
       <div className="px-3 py-2 border-t-2 border-border font-mono text-[11px]">
diff --git a/ui/colony/src/components/ComposeBox.tsx b/ui/colony/src/components/ComposeBox.tsx
index 9342c23..b4ebe6e 100644
--- a/ui/colony/src/components/ComposeBox.tsx
+++ b/ui/colony/src/components/ComposeBox.tsx
@@ -1,7 +1,7 @@
 import { useState, useRef, useEffect, useCallback } from "react";
 import type { MessageType } from "@/types/MessageType";
 import type { User } from "@/types/User";
-import { postMessage, getUsers } from "@/api";
+import { postMessage, getUsers, getCurrentUsername } from "@/api";
 import { cn } from "@/lib/utils";
 
 interface Props {
@@ -34,6 +34,9 @@ export function ComposeBox({
   const [mentionQuery, setMentionQuery] = useState("");
   const [mentionIdx, setMentionIdx] = useState(0);
   const inputRef = useRef<HTMLTextAreaElement>(null);
+  // Apes only send text — type selector is for agents
+  const currentUser = users.find((u) => u.username === getCurrentUsername());
+  const isAgent = currentUser?.role === "agent";
   const meta = TYPE_META[msgType];
 
   // Load users for mention autocomplete
@@ -194,18 +197,20 @@ export function ComposeBox({
               e.preventDefault();
               handleSend();
             }
-            if (e.key === "Tab" && !e.shiftKey) {
-              e.preventDefault();
-              cycleType(1);
-            }
-            if (e.key === "Tab" && e.shiftKey) {
-              e.preventDefault();
-              cycleType(-1);
-            }
-            if (e.ctrlKey && e.key >= "1" && e.key <= "5") {
-              e.preventDefault();
-              const types: MessageType[] = ["text", "code", "result", "error", "plan"];
-              setMsgType(types[parseInt(e.key) - 1]);
+            if (isAgent) {
+              if (e.key === "Tab" && !e.shiftKey) {
+                e.preventDefault();
+                cycleType(1);
+              }
+              if (e.key === "Tab" && e.shiftKey) {
+                e.preventDefault();
+                cycleType(-1);
+              }
+              if (e.ctrlKey && e.key >= "1" && e.key <= "5") {
+                e.preventDefault();
+                const types: MessageType[] = ["text", "code", "result", "error", "plan"];
+                setMsgType(types[parseInt(e.key) - 1]);
+              }
             }
           }}
           placeholder="message"
@@ -217,26 +222,30 @@ export function ComposeBox({
           )}
         />
 
-        {/* Bottom bar — prefix + type indicator */}
+        {/* Bottom bar */}
         <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>
+          {isAgent ? (
+            <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="font-mono text-xs text-muted-foreground/30">&gt;</span>
+          )}
 
           <span className={cn(
             "text-[9px] font-mono uppercase tracking-[0.2em] transition-opacity",
-            meta.color,
+            isAgent ? meta.color : "text-muted-foreground",
             content ? "opacity-60" : "opacity-25",
           )}>
-            {msgType} · enter to send
+            {isAgent ? `${msgType} · ` : ""}enter to send
           </span>
         </div>
       </div>