Phase 4: Bots & Extensibility

Backend:
- internal/bot/auth.go: bot token generation and verification
- internal/bot/handlers.go: bot CRUD (create, list, get, update, delete, server management, token regen)
- internal/bot/commands.go: slash command registration and management
- internal/webhook/handlers.go: webhook CRUD and execution endpoint
- internal/webhook/token.go: webhook token generation
- internal/db/db.go: bots, bot_servers, slash_commands, webhooks tables
- internal/gateway/events.go: BOT_JOIN, BOT_LEAVE event constants
- cmd/server/main.go: wired bot, webhook, invite routes

Frontend:
- stores/bot.ts: Zustand store for bot management
- BotManager.tsx: bot list, create, edit, delete, add to server, token display
- CommandManager.tsx: slash command CRUD per bot
- SlashCommandPopup.tsx: / command autocomplete popup
- App.tsx: /bots and /bots/:id/commands routes

Examples:
- examples/modbot/: auto-delete banned words, /kick, /ban, /purge commands
- examples/welcome/: welcome message on member join

web/src/App.tsx

@@ -3,6 +3,8 @@ import { LoginForm } from './components/LoginForm.tsx';
 import { Layout } from './components/Layout.tsx';
 import { ChatArea } from './components/ChatArea.tsx';
 import { UserSettings } from './components/UserSettings.tsx';
+import { BotManager } from './components/BotManager.tsx';
+import { CommandManager } from './components/CommandManager.tsx';
 import { useAuthStore } from './stores/auth.ts';
 
 function ProtectedRoute({ children }: { children: React.ReactNode }) {
@@ -33,6 +35,42 @@ function App() {
             </ProtectedRoute>
           }
         />
+        <Route
+          path="/bots"
+          element={
+            <ProtectedRoute>
+              <div className="h-full w-full flex flex-col bg-gb-bg">
+                <header className="flex items-center gap-4 px-4 py-2 border-b border-gb-bg-t bg-gb-bg-s">
+                  <Link to="/" className="text-gb-fg-f hover:text-gb-aqua font-mono text-sm">
+                    ← [BACK]
+                  </Link>
+                  <span className="text-gb-orange font-mono text-sm">BOT MANAGER</span>
+                </header>
+                <div className="flex-1 overflow-hidden">
+                  <BotManager />
+                </div>
+              </div>
+            </ProtectedRoute>
+          }
+        />
+        <Route
+          path="/bots/:id/commands"
+          element={
+            <ProtectedRoute>
+              <div className="h-full w-full flex flex-col bg-gb-bg">
+                <header className="flex items-center gap-4 px-4 py-2 border-b border-gb-bg-t bg-gb-bg-s">
+                  <Link to="/bots" className="text-gb-fg-f hover:text-gb-aqua font-mono text-sm">
+                    ← [BACK]
+                  </Link>
+                  <span className="text-gb-orange font-mono text-sm">SLASH COMMANDS</span>
+                </header>
+                <div className="flex-1 overflow-hidden">
+                  <CommandManager />
+                </div>
+              </div>
+            </ProtectedRoute>
+          }
+        />
         <Route
           path="/"
           element={