ui: ScrollArea, Skeleton loading, apes can't set message type

- 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

@@ -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