mobile responsive UI + spec update for mobile requirement

- sidebar collapses on mobile, opens with hamburger menu
- overlay backdrop on mobile when sidebar open
- channel select closes sidebar on mobile
- spec: mobile-responsive is now an acceptance criterion

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

docs/tech-spec-colony-2026-03-29.md

@@ -33,7 +33,7 @@ Benji and Neeraj need a communication layer for the apes research project. Slack
 - Typing indicators, presence, read receipts
 - Search (just scroll — it's linear)
 - Notifications (push, email, desktop)
-- Mobile app
+- Native mobile app (but the web UI MUST be mobile-responsive — apes check messages from their phones)
 
 ## Tech Stack
 
@@ -236,6 +236,7 @@ Rationale: validate the conversation model and deploy early. Auth and real-time
 - [ ] Web UI renders message types distinctly (code = syntax highlight, error = red, plan = structured)
 - [ ] Deployed at https://apes.unslope.com with auto-TLS
 - [ ] Benji and Neeraj accounts seeded on first deploy
+- [ ] Web UI is fully usable on mobile (responsive layout, touch-friendly compose)
 
 ## Non-Functional Requirements
 

ui/colony/src/App.tsx

@@ -68,20 +68,43 @@ export default function App() {
 
   const messagesById = new Map(messages.map((m) => [m.id, m]));
   const activeChannel = channels.find((c) => c.id === activeChannelId);
-  const _currentUser = getCurrentUsername();
+  const [sidebarOpen, setSidebarOpen] = useState(false);
 
   return (
-    <div className="flex h-full">
+    <div className="flex h-full relative">
+      {/* Mobile sidebar overlay */}
+      {sidebarOpen && (
+        <div
+          className="fixed inset-0 bg-black/50 z-40 md:hidden"
+          onClick={() => setSidebarOpen(false)}
+          onKeyDown={() => {}}
+          role="button"
+          tabIndex={-1}
+        />
+      )}
+
+      <div className={`${sidebarOpen ? "fixed inset-y-0 left-0 z-50" : "hidden"} md:relative md:block`}>
         <ChannelSidebar
           channels={channels}
           activeId={activeChannelId}
-        onSelect={setActiveChannelId}
+          onSelect={(id) => {
+            setActiveChannelId(id);
+            setSidebarOpen(false);
+          }}
           onChannelCreated={loadChannels}
         />
+      </div>
 
       <div className="flex-1 flex flex-col min-w-0">
         {/* Channel header */}
         <div className="px-4 py-2 border-b border-border flex items-center gap-2">
+          <button
+            type="button"
+            onClick={() => setSidebarOpen(true)}
+            className="md:hidden text-muted-foreground hover:text-foreground text-[14px] mr-1"
+          >
+            =
+          </button>
           {activeChannel ? (
             <>
               <span className="text-muted-foreground">#</span>