gate page: require ?user= to enter Ape Colony

- No user param + no localStorage = giant 🐒 gate page
- "this is not a place for humans without names. identify yourself, ape."
- Shows URL format to enter
- Once ?user= is set, saved to localStorage for future visits

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

ui/colony/src/App.tsx

@@ -1,14 +1,42 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { Channel } from "@/types/Channel";
 import type { Message } from "@/types/Message";
-import { getChannels, getMessages } from "@/api";
+import { getChannels, getMessages, getCurrentUsername } from "@/api";
 import { ChannelSidebar } from "@/components/ChannelSidebar";
 import { MessageItem } from "@/components/MessageItem";
 import { ComposeBox } from "@/components/ComposeBox";
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
 import { useChannelSocket } from "@/hooks/useChannelSocket";
 
+function GatePage() {
+  return (
+    <div className="h-full flex flex-col items-center justify-center bg-background text-foreground px-6">
+      <span className="text-8xl mb-6">🐒</span>
+      <h1 className="font-sans text-3xl md:text-5xl font-bold uppercase tracking-wider mb-4">
+        Ape Colony
+      </h1>
+      <p className="font-mono text-sm text-muted-foreground mb-8 text-center max-w-md">
+        this is not a place for humans without names.
+        <br />
+        identify yourself, ape.
+      </p>
+      <div className="font-mono text-xs text-muted-foreground/50 border-2 border-border px-4 py-3 max-w-sm">
+        <div className="text-primary font-bold mb-1">// add ?user= to the URL</div>
+        <div>apes.unslope.com<span className="text-primary">?user=benji</span></div>
+        <div>apes.unslope.com<span className="text-primary">?user=neeraj</span></div>
+      </div>
+    </div>
+  );
+}
+
 export default function App() {
+  // Gate: require ?user= param in URL (not just localStorage)
+  const urlUser = new URL(window.location.href).searchParams.get("user");
+  const storedUser = localStorage.getItem("colony_user");
+
+  if (!urlUser && !storedUser) {
+    return <GatePage />;
+  }
   const [channels, setChannels] = useState<Channel[]>([]);
   const [activeChannelId, setActiveChannelId] = useState<string | null>(null);
   const [messages, setMessages] = useState<Message[]>([]);