feat: typing indicators in channel and DM chats

Wired existing typing store (backend WS broadcast + frontend
_handleTypingEvent with 3s auto-expiry) into ChatArea and DMChat.
Typing events throttled to once per 3s. Shows 'X is typing...' or
'X and N others are typing...' below the messages, above the input.

web/src/components/DMChat.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState, useCallback } from "react";
 import { useParams } from "react-router-dom";
 import { useConversationStore, type ConversationMessage } from "../stores/conversation.ts";
 import { useAuthStore } from "../stores/auth.ts";
+import { useTypingStore } from "../stores/typing.ts";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 
@@ -41,10 +42,13 @@ export function DMChat() {
   const sendMessage = useConversationStore((s) => s.sendMessage);
   const fetchConversations = useConversationStore((s) => s.fetchConversations);
   const currentUser = useAuthStore((s) => s.user);
+  const typingUsers = useTypingStore((s) => s.typingUsers);
+  const sendTypingStart = useTypingStore((s) => s.sendTypingStart);
   const [input, setInput] = useState("");
   const [error, setError] = useState<string | null>(null);
   const bottomRef = useRef<HTMLDivElement>(null);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const lastTypingRef = useRef<number>(0);
 
   const id = conversationId || activeId;
   const conversation = conversations.find((c) => c.id === id);
@@ -120,6 +124,13 @@ export function DMChat() {
         ))}
         <div ref={bottomRef} />
       </div>
+      {(() => {
+        const convTyping = id ? (typingUsers[id] || []).filter(u => u.userId !== currentUser?.id) : [];
+        if (convTyping.length === 0) return null;
+        const names = convTyping.map(u => u.username);
+        const text = names.length === 1 ? `${names[0]} is typing...` : names.length === 2 ? `${names[0]} and ${names[1]} are typing...` : `${names[0]} and ${names.length - 1} others are typing...`;
+        return <div className="px-3 pt-1 text-xs text-gb-fg-f font-mono italic">{text}</div>;
+      })()}
       {error && (
         <div className="px-3 pb-1">
           <p className="text-gb-red text-xs font-mono">ERR: {error}</p>
@@ -130,7 +141,16 @@ export function DMChat() {
         <input
           type="text"
           value={input}
-          onChange={(e) => setInput(e.target.value)}
+          onChange={(e) => {
+            setInput(e.target.value);
+            if (id && e.target.value.length > 0) {
+              const now = Date.now();
+              if (now - lastTypingRef.current > 3000) {
+                sendTypingStart(id);
+                lastTypingRef.current = now;
+              }
+            }
+          }}
           placeholder="type a message..."
           className="terminal-input w-full"
           disabled={!id}