feat: add web UI dashboard SPA with dashboard, chat, sessions, and settings pages

- Add SPA shell with hash-based router, sidebar navigation, and WebSocket RPC client
- Add dashboard page with system health cards, channel status, and auto-refresh
- Add chat page with session selector, streaming tool events, and markdown rendering
- Add sessions page with list, history viewer, and delete functionality
- Add settings page with hook pattern editor, tool list, and config viewer
- Add backend handlers: sessions.delete, sessions.switch, system.channels, system.usage
- Wire channelRegistry into gateway server for channel status reporting
- Extend static file server with .mjs, .png, .ico, .woff2 content types

src/gateway/handlers/system.ts

@@ -9,6 +9,8 @@ export interface SystemHandlerDeps {
   getConnectionCount: () => number;
   /** Optional callback to trigger a graceful restart. If not provided, system.restart returns an error. */
   restart?: () => Promise<void>;
+  getChannels?: () => Array<{ name: string; status: string }>;
+  getUsage?: () => { totalSessions: number; activeConnections: number };
 }
 
 export function createSystemHandlers(deps: SystemHandlerDeps) {
@@ -41,5 +43,22 @@ export function createSystemHandlers(deps: SystemHandlerDeps) {
 
       return response;
     },
+
+    'system.channels': async (request: GatewayRequest): Promise<OutboundMessage> => {
+      if (!deps.getChannels) {
+        return makeResponse(request.id, { channels: [] });
+      }
+      return makeResponse(request.id, { channels: deps.getChannels() });
+    },
+
+    'system.usage': async (request: GatewayRequest): Promise<OutboundMessage> => {
+      const uptime = Math.floor((Date.now() - deps.startTime) / 1000);
+      const usage = deps.getUsage?.() ?? { totalSessions: 0, activeConnections: 0 };
+      return makeResponse(request.id, {
+        uptime,
+        ...usage,
+        tools: deps.getToolCount(),
+      });
+    },
   };
 }