feat(ui): character counter in message compose box

web/src/components/MessageInput.tsx

@@ -690,6 +690,15 @@ export const MessageInput = forwardRef<HTMLTextAreaElement, MessageInputProps>(f
 
             <span className="flex-1" />
 
+            {/* character counter */}
+            {value.length > 0 && (
+              <span className={`text-xs font-mono tabular-nums px-1 ${
+                value.length > 3800 ? "text-gb-orange" : "text-gb-fg-f"
+              }`}>
+                {4000 - value.length}/4000
+              </span>
+            )}
+
             {/* mode toggle */}
             <button type="button" disabled={disabled} onClick={toggleMode}
               title={mode === "md" ? "Switch to rich text" : "Switch to markdown"}